时间戳

首页 > 解决方案 > 如何控制任何嵌入式视频？

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

问题描述

我抓取了一些视频，并用 iframe 显示它们。效果很好，但是，我现在正在寻找一种方法来控制我的反应应用程序上的这些视频。我所说的控制是例如：暂停、播放、视频中的当前时间……等等。

到目前为止，我已经尝试了几件事。

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

编辑：这是我的 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>

标签： javascriptreactjs

解决方案

看看 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

推荐阅读