使用jQuery在Dom Load上自动播放HTML5视频 [英] Auto-play an HTML5 video on Dom Load using jQuery

问题描述

我试图在dom使用jQuery加载后立即播放视频。这是我的代码：

HTML

 < video id =videowidth =420> 
< source src =http://www.w3schools.com/html/mov_bbb.mp4type =video / mp4> 
< source src =http://www.w3schools.com/html/mov_bbb.oggtype =video / ogg> 
< p>您的浏览器不支援HTML5影片。< / p> 
< / video> 
  

JS（ script.js）

  $（document）.ready（function（）{
 $（＃ video）.play（）; 
}）; 
  

当您加载视频不播放时，我会在哪里出错？

解决方案

jQuery选择器 $（＃video）返回一个jQuery对象。由于 play（）是DOM元素的函数，所以您必须获取DOM元素：

  $（ ＃视频）得到（0）; 
 $ / code> 

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



  $（ ＃视频）得到（0）.play（）;编辑：您也可以使用HTML5选定的标签，以防jQuery回退。请注意自动播放标记。
 < video controls =controls autoplay =autoplayloop =loop
 width =233height =147poster =// www.cdn.com//video.png
 preload =autotitle = 视频 > 
< source src =// www.cdn.com/video.mp4type =video / mp4/> 
< source src =// www.cdn.com/video.ogvtype =video / ogv/> 
< source src =// www.cdn.com/video.webmtype =video / webm/> 
< / video> 
  
 
I'm trying to play a video as soon as the dom has loaded using jQuery. This is my code:

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();
});
When you dom loads the video does not play, where am I going wrong? Thanks in advance.
解决方案
The jQuery selector $("#video") returns a jQuery object. Since play() is a function of the DOM element, you must get the DOM element with:
$("#video").get(0);
before using .play() method:
$("#video").get(0).play();
Edit: You can also use HTML5 selected tags in case jQuery fall back. Note the autoplay tag.
<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>


                        
这篇关于使用jQuery在Dom Load上自动播放HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！