html 嵌入标签视频事件答案

【问题标题】：html embed tag video eventshtml 嵌入标签视频事件
【发布时间】：2015-05-27 10:58:16
【问题描述】：

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

【问题讨论】：

你知道embed加载的内容是HTML页面吗？
@akmozo 但是当我写 onplay 事件时它也不起作用:(
player.vimeo.com/video/76979871" width="600" height="600" frameborder="0" onplay="alert( '呼叫');" onclick="alert('hello');">
你没明白我的意思！用那个 HTML 页面做任何事情都是不可能的！如果要控制视频，则必须将视频本身嵌入 HTML5 视频元素（或其他可控播放器）中，而不是嵌入该视频的 HTML 页面！！！
@akmozo - 好的，但是当我添加视频标签时，akmozo 不支持我来自 vimeo 的视频。代码是 -

标签： javascript html video embed

【解决方案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/

【讨论】：