Javascript html嵌入标记视频事件_Javascript_Html_Video_Embed

Javascript html嵌入标记视频事件

javascript html video

Javascript html嵌入标记视频事件,javascript,html,video,embed,Javascript,Html,Video,Embed,我正在使用html嵌入标记来运行我的视频。但我在获取其事件时遇到了问题，我想在触发播放或暂停事件时调用函数。此外，我想视频是播放时，我点击播放按钮我需要你的帮助：我的代码如下- <!DOCTYPE html> <html> <head></head> <body> <div class="modal-box"> <div class="modal-box-con

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


玩
运行时间：
var oVideo=document.getElementById（“video1”）//视频元素
var button=document.getElementById（“playButton”）；
var display=document.getElementById（“timeDisplay”）；
//捕获时间变化并显示当前位置
oVideo.addEventListener（“时间更新”，函数（）{
display.innerText=oVideo.currentTime.toFixed（2）；
}，假）；
按钮。addEventListener（“单击”），函数（）{
//根据暂停属性在播放和暂停之间切换
如果（oVideo.暂停）{
var oInput=document.getElementById（'videoFile'）；//文本框
if（输入值）{
//仅在文本字段更改时加载视频文件
if（oInput.value！=oVideo.src）{
oVideo.src=oInput.value；
oVideo.load（）；
}
播放视频（）；
}
}否则{
oVideo.pauseVideo（）；
}
}，假）；
//捕获播放事件并将按钮设置为“暂停”
oVideo.addEventListener（“onplay”，函数（）{
button.innerHTML=“暂停”；
}，假）；
//捕获暂停事件并将按钮设置为“播放”
oVideo.addEventListener（“onpause”，函数（）{
button.innerHTML=“播放”；
}，假）；

代码不起作用的问题是，您试图在嵌入式视频上调用DOM函数，但这不起作用。

幸运的是，这可以通过一个很好的插件来实现：
只需确保使用Vimeo iframe嵌入，并根据需要查找API事件部分。注意，这仅适用于嵌入式Vimeo视频。

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

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

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

正在使用JSFIDLE:

你知道通过嵌入加载的内容是HTML页面吗？@akmozo但当我在编写Play event时，它也不起作用：（你不明白我的意思！无法使用HTML页面执行任何操作！！！如果你想控制视频，你必须将视频本身嵌入HTML5视频元素中（或其他可控播放器）不是嵌入该视频的HTML页面！！！@akmozo-好的，但是当我添加视频标签时，akmozo不支持我的vimeo视频。代码为-