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. mysql实战优化之八：关联查询优化

    1. 多表连接类型 1. 笛卡尔积(交叉连接) 在MySQL中可以为CROSS JOIN或者省略CROSS即JOIN,或者使用','  如: 由于其返回的结果为被连接的两个数据表的乘积,因此当有WHE ...

  2. Mybatis拦截器介绍及分页插件

    1.1    目录 1.1 目录 1.2 前言 1.3 Interceptor接口 1.4 注册拦截器 1.5 Mybatis可拦截的方法 1.6 利用拦截器进行分页 1.2     前言 拦截器的一 ...

  3. xunsearch进阶使用

    目录 设置分页 设置排序 读取文档结果 搜索结果高亮处理 获取数量 获取热门搜索词 获取相关搜索词 设置分页 $search->setLimit(5); // 设置返回结果为前 5 条 $sea ...

  4. Populating Next Right Pointers in Each Node II ？

    void connect(TreeLinkNode *root) { if(root==NULL) return; if(root->left&&root->right) ...

  5. js中的class

    js中的class 类写法 class SuperClass { constructor(option) { this.a = option; } fn() { console.log(this.b) ...

  6. Python中的闭包与迭代器

    前面内容补充 函数名分应用(第一类对象) 函数名的命名规范与变量命名是一样的函数名其实就是变量名 函数名可以作为列表中的元素进行存储 例如: def func1(): pass def func2() ...

  7. powerdesigner Oracle.sql转mysql.sql

    将要导入的库的所有表的表结构(不要表数据,只要表结构)导出成一个.sql文件. 在PowerDesinger里找到 File -->> Reverse Engineer --->&g ...

  8. matlab GPU 操作

    从Matlab2013版本开始,matlab将可以直接调用gpu进行并行计算,而不再需要安装GPUmat库.这一改动的好处是原有的matlab内置函数都可以直接运用,只要数据格式是gpuArray格式 ...

  9. 【FZU2280】Magic

    题意 给出n个字符串,每个字符串有一个权值wi 有q个操作,操作有两种 1 x y 将字符串x的权值变为y 2 x 查询操作,输出以字符串x为后缀,且权值小于等于wx的字符串个数.其中n<=10 ...

  10. web优化

    一个小型的网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构.性能的要求都很简单.随着互联网业务的不断丰富,网站相关的技术经过 ...