html5 video使用autoplay属性时,声音混乱
html5 video使用autoplay属性时,声音混乱
页面代码
Index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta charset='utf-8'/>
<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(){
$('#channel1').click(function(){
setConfig("test1.mp4");
}); $('#channel2').click(function(){
setConfig("test2.mp4");
}); $('#channel3').click(function(){
setConfig("test3.mp4");
});
} function setConfig(url){
var jo=$('#test1');
var cfg=HTML5MediaService.getDefaultConfig();
cfg=$.extend(cfg, {url: url});
HTML5MediaService.create(jo,cfg);
} </script>
</head>
<body>
<div id='test1' style="height:300px;width:500px;"> </div>
</br>
</br>
</br>
<div>
<span id='channel1'>频道1</span>
<span id='channel2'>频道2</span>
<span id='channel3'>频道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 = $('<video' +
' id="' + this.videoId + '"' +
' src=' + cfg.url +
' controls=' + cfg.controls +
' autoplay=' + cfg.autoplay +
' width=' + cfg.width +
' height=' + cfg.height +
' preload=none' +
'></video>');
videoJo.appendTo(jo.empty());
}
}
我的解决方案:
取掉autoplay,可以使用play()函数来达到自动播放功能;
有不同解决方案的可以分享,谢谢!
html5 video使用autoplay属性时,声音混乱的更多相关文章
- android chrome 不支持 audio/video的autoplay 属性
在chrome 浏览器中输入:chrome://flags,找到"播放媒体时的手势要求",停用就可以了.
- 使用jQuery和CSS自定义HTML5 Video 控件 简单适用
Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中 ...
- 在使用html5的video标签播放视频时为何只有声音却没有图像
在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...
- HTML5 video 视频标签 常用属性
最近在做手机端的 h5 页面的视频直播功能,用到了 Video 标签.其常用的属性有以下几个: src.poster.preload.autoplay.loop.controls.width.heig ...
- HTML5的Video标签的属性,方法和事件汇总
<video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...
- 【HTML5 video】video标签的部分属性解析
转自:http://www.cnblogs.com/kiter/archive/2013/02/25/2932157.html 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Th ...
- HTML5 video 视频标签全属性详解
现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...
- video标签的属性和方法总结
最近想做一个弹幕插件,查了很多video标签的属性和方法 error属性 在正常读取时候,使用媒体数据的过程中,video元素或audio元素的error属性为null,但是任何时候只要出现错误,er ...
- 移动端HTML5<video>视频播放优化实践
遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...
随机推荐
- 第三章 服务治理: Spring Cloud Eureka
Spring Cloud Eureka是 Spring Cloud Netflix微服务套件中的一部分,它基于Netflix Eureka做了二次封装,主要负责完成微服务架构中的服务治理功能 服务治理 ...
- MySQL: [Err] 1093 - You can't specify target table 'bk' for update in FROM clause
错误的意思说,不能先select出同一表中的某些值,再update这个表(在同一语句中). 例如下面这个sql: delete from tbl where id in ( select ...
- Python 小练习二 数据库MySQL、Redis
import pymysql,redis def op_mysql(host,user,password,db,sql,port=3306,charset='utf8'): conn = pymysq ...
- 微信小程序中遇到的wx:if问题
最近在项目中遇到wx:if问题进行梳理一下,有个需求就是有数据的时候显示数据列表,没有数据的时候就显示‘去赚钱’的页面,这可以放在一个页面进行显示,就要用到wx:if判断.我在js中设置了一个变量sh ...
- mac配置git mergetool为p4merge(2013笔记整理)
既有环境: 1)下载安装p4merge 2)安装git 下面是配置p4merge为git mergetool的步骤 1. /usr/local/bin下创建extMerge文件: $ cat > ...
- Github简单的上传和修改
先自己手动创建一个仓库 echo "# delet" >> README.md git init git add . git commit -m "first ...
- selenium2 用testNG对百度首页输入框进行测试 (三)
如果还没有安装testNG的亲,可以点击http://www.cnblogs.com/milanmi/p/4346580.html查看安装过程. 这节主要是对百度首页的输入框进行输入测试. packa ...
- Python中__new__与__init__介绍
在python2.x中,从object继承得来的类称为新式类(如class A(object))不从object继承得来的类称为经典类(如class A()) 新式类跟经典类的差别主要是以下几点: 1 ...
- 266. Palindrome Permutation 重新排列后是否对称
[抄题]: Given a string, determine if a permutation of the string could form a palindrome. For example, ...
- solr开发之基本操作
package zr.com.util; import java.io.IOException; import java.util.List; import java.util.Map; import ...