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属性时，声音混乱的更多相关文章

  1. android chrome 不支持 audio/video的autoplay 属性

    在chrome 浏览器中输入:chrome://flags,找到"播放媒体时的手势要求",停用就可以了.

  2. 使用jQuery和CSS自定义HTML5 Video 控件 简单适用

    Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中 ...

  3. 在使用html5的video标签播放视频时为何只有声音却没有图像

    在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...

  4. HTML5 video 视频标签 常用属性

    最近在做手机端的 h5 页面的视频直播功能,用到了 Video 标签.其常用的属性有以下几个: src.poster.preload.autoplay.loop.controls.width.heig ...

  5. HTML5的Video标签的属性,方法和事件汇总

    <video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...

  6. 【HTML5 video】video标签的部分属性解析

    转自:http://www.cnblogs.com/kiter/archive/2013/02/25/2932157.html 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Th ...

  7. HTML5 video 视频标签全属性详解

    现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...

  8. video标签的属性和方法总结

    最近想做一个弹幕插件,查了很多video标签的属性和方法 error属性 在正常读取时候,使用媒体数据的过程中,video元素或audio元素的error属性为null,但是任何时候只要出现错误,er ...

  9. 移动端HTML5<video>视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

随机推荐

  1. 第三章 服务治理： Spring Cloud Eureka

    Spring Cloud Eureka是 Spring Cloud Netflix微服务套件中的一部分,它基于Netflix Eureka做了二次封装,主要负责完成微服务架构中的服务治理功能 服务治理 ...

  2. 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 ...

  3. Python 小练习二 数据库MySQL、Redis

    import pymysql,redis def op_mysql(host,user,password,db,sql,port=3306,charset='utf8'): conn = pymysq ...

  4. 微信小程序中遇到的wx:if问题

    最近在项目中遇到wx:if问题进行梳理一下,有个需求就是有数据的时候显示数据列表,没有数据的时候就显示‘去赚钱’的页面,这可以放在一个页面进行显示,就要用到wx:if判断.我在js中设置了一个变量sh ...

  5. mac配置git mergetool为p4merge（2013笔记整理）

    既有环境: 1)下载安装p4merge 2)安装git 下面是配置p4merge为git mergetool的步骤 1. /usr/local/bin下创建extMerge文件: $ cat > ...

  6. Github简单的上传和修改

    先自己手动创建一个仓库 echo "# delet" >> README.md git init git add . git commit -m "first ...

  7. selenium2 用testNG对百度首页输入框进行测试 （三）

    如果还没有安装testNG的亲,可以点击http://www.cnblogs.com/milanmi/p/4346580.html查看安装过程. 这节主要是对百度首页的输入框进行输入测试. packa ...

  8. Python中__new__与__init__介绍

    在python2.x中,从object继承得来的类称为新式类(如class A(object))不从object继承得来的类称为经典类(如class A()) 新式类跟经典类的差别主要是以下几点: 1 ...

  9. 266. Palindrome Permutation 重新排列后是否对称

    ［抄题］: Given a string, determine if a permutation of the string could form a palindrome. For example, ...

  10. solr开发之基本操作

    package zr.com.util; import java.io.IOException; import java.util.List; import java.util.Map; import ...