7

我正在尝试使用 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（脚本.js）

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

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

4

3 回答 3

9

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>
于 2013-04-05T19:49:44.463 回答
1

我知道不是 jQuery，而是在带有 html5 的标准 javascript 中，您可以使用：

var video = document.getElementById("target_video");
video.autoplay = true;
video.load();
于 2016-09-16T10:44:53.277 回答
0 
$('video#video').each( (i,e) => e.play() );

正如Justin McDonald所指出的，该play()方法存在于Video DOM 节点本身上，因此您首先必须将 jQuery 对象解析为特定的节点。id="video"但是，如果元素不存在或不是video节点，他的解决方案会抛出错误。

于 2019-10-11T21:54:15.480 回答