Question

我有一个动态添加的视频元素，我之前有一个内联oncanplay脚本。

<video id="videoCurrent" type="video/mp4" oncanplay="displayVideoChapters(this);" controls>

视频元素被添加到静态div

<div id="videoDisplay"> </div>

我现在尝试使用canplay中链接的脚本文件中的jQuery将<head>事件附加到视频元素

$(document).ready(function() {
  $("#videoDisplay").on('canplay', 'video#videoCurrent', function() {
    console.log(this);
  });
});

然而，没有任何反应。我尝试过其他活动; loadstart，pause，play具有相同的结果。 mouseover是唯一可以触发console.log（this）的事件。我不理解的是什么？

Answer 1

我不知道jquery是否有“canplay”活动，正如我在W3C学校看到的这个canplay活动，但是在简单的javascript中：

var vid = document.getElementById("videoCurrent");
vid.oncanplaythrough = function() {
    console.log("Can play through video without stopping");
    vid.play()
};

您可能首先尝试使用第一段代码，看看它是否有效，我还记得.play（）函数是用于在JavaScript中播放视频的函数，希望这会有所帮助。

Answer 2

我通过将canplay事件添加到回调函数来解决这个问题，该函数从缩略图链接中获取动态视频播放器。

$('#staticVideoPlayerContainer').on('click', 'a.videoUrl', function() {
    $.get('url', function(data) { 
        $("#videoDisplay").html(data);                   //Dynamic video player is added
        $("#videoCurrent")[0].oncanplay = function() {   //Event listener attached
            console.log(this);                           //Logs video on canplay
        }
    });
});

Answer 3

您可以这样使用它，对我来说效果很好：

$('video').each(function(index, video) {

   $(video).on('canplay', function() {
     console.log(video, 'this video can play');
   });
});

html5视频可以使用jQuery播放事件

3 个答案: