HTML嵌入标签视频事件

Question

HTML嵌入标签视频事件

4

我正在使用html嵌入标签来播放我的视频。但是我遇到了获取其事件的问题，我希望在触发播放或暂停事件时调用一个函数。同时，我希望当我点击播放按钮时，视频能够播放。

以下是我的代码 -

<!DOCTYPE html>
<html>
  <head></head>
    <body>
        <div class="modal-box">
            <div class="modal-box-content">
                <embed id="video1" src="http://player.vimeo.com/video/76979871" width="600" height="600" frameborder="0"></embed>
            </div>
        </div>
        <button id="playButton" style="width: 80px" >Play</button>
        <div >Elapsed Time: <span id="timeDisplay"></span></div>

      <!-- Button width set so overall size doesn't change when we toggle the label -->



       <script>

         var oVideo = document.getElementById("video1");      //video element
         var button = document.getElementById("playButton");
         var display = document.getElementById("timeDisplay");


         //  Capture time changes and display current position
         oVideo.addEventListener("timeupdate", function () {
           display.innerText = oVideo.currentTime.toFixed(2) ;
         }, false);

         button.addEventListener("click", function () {
           //  toggle between play and pause based on the paused property
           if (oVideo.paused) {
             var oInput = document.getElementById('videoFile');   //text box
             if (oInput.value) {
               //  only load a video file when the text field changes
               if (oInput.value != oVideo.src) {
                 oVideo.src = oInput.value;
                 oVideo.load();
               }
               oVideo.playVideo();
             }
           } else {

             oVideo.pauseVideo();
           }
         }, false);

         // Capture the play event and set the button to say pause
         oVideo.addEventListener("onplay", function () {
           button.innerHTML = "Pause";
         }, false);

         // Capture the pause event and set the button to say play
         oVideo.addEventListener("onpause", function () {
           button.innerHTML = "Play";
         }, false);


         </script>
</body>
</html>

- Anupam Sharma

你知道通过嵌入加载的内容是一个 HTML 页面吗？ - akmozo

@akmozo但是当我编写onplay事件时，它也不起作用:( - Anupam Sharma

你没有理解我的意思！那个HTML页面无法做任何事情！！！如果你想控制视频，你必须将视频本身嵌入到HTML5视频元素（或其他可控播放器）中，而不是嵌入该视频的HTML页面！！！ - akmozo

@akmozo - 好的，但是当我添加视频标签时，它不支持来自vimeo的视频。代码如下 - <video id="video1" src="http://player.vimeo.com/video/76979871" /> - Anupam Sharma

当然不会，因为你使用的是 HTML 页面的链接！你必须获取视频链接才能在你的页面中使用它。我不知道，也许他们有一些 API 或类似的东西来获取视频 URL 以嵌入外部网站。 - akmozo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mike Hanslo · Answer 1

你的代码无法正常工作的问题是因为你试图在嵌入的视频上调用DOM函数，这是行不通的。

幸运的是，可以使用一个很好的插件来解决这个问题，可以在这里找到：Vimeo-jQuery-API
只需确保使用 Vimeo iframe 嵌入，并查找适合您需求的 API 事件部分。请注意，这仅适用于嵌入的 Vimeo 视频。

在 Jquery 之后包含插件代码，然后您就可以在 iframe id 上绑定事件监听器：

$("#myvideo").on("play", function(){
    alert('Playing!');
});

$("#myvideo").on("pause", function(){
    alert('Pausing!');
});

工作中的JSfiddle: https://jsfiddle.net/vvemqpvg/1/