javascript - html 嵌入标签视频事件

标签 javascript html video embed

我正在使用 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> 

最佳答案

您的代码无法运行的问题是因为您试图在嵌入式视频上调用 DOM 函数,而这将无法运行。

幸运的是,这可以通过此处找到的一个不错的插件来完成:Vimeo-jQuery-API
只需确保您使用 Vimeo iframe 嵌入并根据您的需要查找有关 API 事件的部分。请注意,这仅适用于嵌入式 Vimeo 视频。

在 Jquery 之后包含插件代码,然后您可以在 iframe id 上绑定(bind)事件监听器:

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

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

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

关于javascript - html 嵌入标签视频事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29227429/

相关文章:

javascript - 单击 JavaScript 更改按钮颜色

html - Angular 2 - 动画过渡不起作用

javascript - 使用javascript淡入淡出

video - 如何使用 libav 修复视频中的卡住像素?

php - YouTube API:如何启用获利

c# - 获取错误 Error-Server tags cannot contain <% ... %> constructs

javascript - jQuery 的 .bind() 与 .on()

video - HEVC:从输入二进制流中获取输入宽度和高度

javascript - SEO友好的JavaScript框架

php - 如何重定向子域链接?