html5中设置或返回音视频是否在加载后即开始播放的属性autoplay

百变鹏仔 2个月前 (10-18) #H5教程

文章标签音视频

实例

启用自动播放，并重载视频：

myVid=document.getElementById("video1");myVid.autoplay=true;myVid.load();

定义和用法

autoplay 属性设置或返回音视频是否在加载后即开始播放。

浏览器支持

所有主流浏览器都支持 autoplay 属性。

注释：Internet Explorer 8 或更早的浏览器不支持该属性。

语法

设置 autoplay 属性：

立即学习“前端免费学习笔记（深入）”；

audio|video.autoplay=true|false

返回 autoplay 属性：

audio|video.autoplay

属性值

值	描述
true	指示音视频在加载完成后随即播放。
false	默认。指示音视频不应在加载后立即播放。

技术细节

返回值	布尔值。true\|false
默认值：	false

html5 video使用autoplay属性时，声音混乱

页面代码

Index.html

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>test</title> <meta charset=&#39;utf-8&#39;/><script src="js/jquery-1.4.4.min.js" type="text/javascript"></script><script src="js/thml5.js" type="text/javascript"></script><script type="text/javascript">window.onload=function(){$(&#39;#channel1&#39;).click(function(){setConfig("test1.mp4");});$(&#39;#channel2&#39;).click(function(){setConfig("test2.mp4");});$(&#39;#channel3&#39;).click(function(){setConfig("test3.mp4");});}function setConfig(url){var jo=$(&#39;#test1&#39;);var cfg=HTML5MediaService.getDefaultConfig(); cfg=$.extend(cfg, {url: url});HTML5MediaService.create(jo,cfg);}</script></head><body><div id=&#39;test1&#39; style="height:300px;width:500px;"></div></br></br></br><div><span id=&#39;channel1&#39;>频道1</span><span id=&#39;channel2&#39;>频道2</span><span id=&#39;channel3&#39;>频道3</span></div></body></html>

js代码
html5.js

var HTML5MediaService= {    getDefaultConfig: function () {        return $.extend({}, {width: "100%", height: "100%", controls: "controls", autoplay: "autoplay"});    },    create:function(jo,cfg){         this.videoId = "videojs_" + new Date().getTime().toString();        var videoJo = $(&#39;<video&#39; +            &#39; id="&#39; + this.videoId + &#39;"&#39; +            &#39; src=&#39; + cfg.url +            &#39; controls=&#39; + cfg.controls +            &#39; autoplay=&#39; + cfg.autoplay +            &#39; width=&#39; + cfg.width +            &#39; height=&#39; + cfg.height +            &#39; preload=none&#39; +            &#39;></video>&#39;);        videoJo.appendTo(jo.empty());    }   }

我的解决方案：

取掉autoplay，可以使用play()函数来达到自动播放功能；

文章推荐

html5中设置或返回音视频是否在加载后即开始播放的属性autoplay

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集