Question

我抓了一些视频，并用iframe展示了它们。那很好，但是，我现在正在寻找一种方法来控制我的react应用程序中的这些视频。我的意思是控制，例如：暂停，播放，视频中的currentTime等。

到目前为止，我已经尝试了几种方法。

html5标签，但无法使用我拥有的mp4视频链接。
一些软件包，例如jplayer或player.js。

我很确定我可以实现自己的目标，我想我只需要找到合适的工具。

编辑：这是我的video.js代码示例

            <video
                    id="my-player"
                    class="video-js"
                    controls
                    preload="auto"
                    poster="//vjs.zencdn.net/v/oceans.png"
                    data-setup='{}'>
                <source src="https://openload.co/embed/myvideo" type="video/mp4"></source>
                <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a
                    web browser that
                    <a href="http://videojs.com/html5-video-support/" target="_blank">
                    supports HTML5 video
                    </a>
                </p>
            </video>

Answer 1

看看video.js。它将完全控制您的视频播放。看看他们的高级示例。另外，您不需要iframe即可处理视频。如果那是设计决定，那很好，但是您可以在没有iframe的情况下进行视频嵌入。

要通过js控制视频播放器实例，请参见

JS

var myPlayer = videojs('example_video_1');

HTML

<video id="example_video_1" data-setup="{}" controls="">
  <source src="my-source.mp4" type="video/mp4">
</video>

然后您可以像下面那样控制播放器实例

myPlayer.play();
myPlayer.pause();
myPlayer.currentTime(120);

请在以下链接中查看播放器API

https://docs.videojs.com/docs/api/player.html

请在以下链接中查看react组件的实现

https://docs.videojs.com/tutorial-react.html

如何控制任何嵌入式视频？

1 个答案: