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. MyBatis collection的两种形式——MyBatis学习笔记之九

    与association一样,collection元素也有两种形式,现介绍如下: 一.嵌套的resultMap 实际上以前的示例使用的就是这种方法,今天介绍它的另一种写法.还是以教师映射为例,修改映射 ...

  2. ZedGraph类库之基本教程篇

      第一部分:基本教程篇                 ZedGraphDemo中一共有9个基本教程的例子.其中大部分都类似,我会讲解其中一些比较典型的例子.把ZedGraph类库的使用逐步展现给大 ...

  3. 双杀 0day 漏洞（CVE-2018-8174）复现

    漏洞描述: CVE-2018-8174 是 Windows VBScript Engine 代码执行漏洞. 微软在4月20日早上确认此漏洞,并于5月8号发布了官方安全补丁,对该 0day 漏洞进行了修 ...

  4. Python Twisted系列教程6：抽象地利用Twisted

    作者:dave@http://krondo.com/and-then-we-took-it-higher/  译者:杨晓伟(采用意译) 你可以从这里从头开始阅读这个系列. 打造可以复用的诗歌下载客户端 ...

  5. Python下OS模块重命名方法renames

    在python中有很多强大的模块,其中我们经常要使用的就是OS模块,OS模块提供了超过200个方法来供我们使用,并且这些方法都是和数据处理相关的,这里介绍下重命名这个方法. OS的重命名方法是os.r ...

  6. 【树莓派】开机自启动脚本方法之一（.Desktop文件）

    转载处: 又一个让树莓派开机运行Python脚本的方法 Linux 创建启动器(.Desktop文件) 首先,树莓派使用的是官方推荐的镜像:RASPBIAN: 在树莓派上常常会需要开机自启动pytho ...

  7. telnet测试端口是否正常打开

    点击计算机的开始菜单-->运行 ,输入CMD命令,然后确定.打开cmd命令行.   输入telnet测试端口命令: telnet IP 端口 或者 telnet 域名 端口 回车   如果端口关 ...

  8. css二阴影+第三维度z-index

    <span style="text-shadow: 3px 3px 1px #888;">shadowed</span><span style=&qu ...

  9. Django框架 之 Ajax

    Django框架 之 Ajax 浏览目录 AJAX准备知识 AJAX与XML的比较 AJAX简介 jQuery实现的ajax AJAX参数 AJAX请求如何设置csrf_token 序列化 一.AJA ...

  10. Git安装和常用命令

    Git是目前世界上最先进的分布式版本控制系统!!! Git能自动帮我们记录每次文件的改动,还可以让同事协作编辑. 接下来,简单的介绍下Git的安装和常用命令: Git安装: 1.Windows系统,进 ...