Question

我正在使用html embed标签来运行我的视频。但是我遇到问题才能获得它的事件，我想在触发播放或暂停事件时调用一个函数。我也希望当我点击播放按钮时播放视频。

我需要你的帮助：

我的代码在下面 -

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

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/

html嵌入标签视频事件

1 个答案: