Question

我正在尝试使用jQuery加载dom时播放视频。这是我的代码：

HTML

<video id="video" width="420">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  <p>Your browser does not support HTML5 video.</p>
</video>

JS（script.js）

$(document).ready(function() {
  $(#video).play();
});

当你加载视频时，视频无法播放，我哪里出错了？提前谢谢。

Answer 1

jQuery选择器$("#video")返回一个jQuery对象。由于play()是DOM元素的函数，因此必须使用以下函数获取DOM元素：

$("#video").get(0);

在使用.play（）方法之前：

$("#video").get(0).play();

编辑：您也可以使用HTML5选择的标签，以防jQuery回退。请注意autoplay标记。

<video controls="controls" autoplay="autoplay" loop="loop"
width="233" height="147" poster="//www.cdn.com//video.png"
preload="auto" title="Video">
    <source src="//www.cdn.com/video.mp4" type="video/mp4"/>
    <source src="//www.cdn.com/video.ogv" type="video/ogv"/>
    <source src="//www.cdn.com/video.webm" type="video/webm"/>
</video>

Answer 2

我知道不是jQuery，但在使用html5的标准javascript中你可以使用：

var video = document.getElementById("target_video");
video.autoplay = true;
video.load();

Answer 3

$('video#video').each( (i,e) => e.play() );

正如Justin McDonald所指出的那样，Video DOM Node本身存在play()方法，因此您首先必须将jQuery Object解析为特定的Node。但是，如果带有id="video"的元素不存在或不是video节点，他的解决方案将引发错误。

使用jQuery在Dom Load上自动播放HTML5视频

3 个答案: