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. 杂项-WiFi：JotSpot

    ylbtech-杂项-WiFi:JotSpot JotSpot公司成立于2003年,由曾经创建了搜索引擎Excite的Joe Kraus一手创建,曾获得了来自Mayfield和RedPoint 两家风 ...

  2. Java-API-Package：java.sql百科

    ylbtech-Java-API-Package:java.sql百科 提供使用 JavaTM 编程语言访问并处理存储在数据源(通常是一个关系数据库)中的数据的 API.此 API 包括一个框架,凭借 ...

  3. selenium中Xpath轴定位方法

    1.Xpath轴:轴可定义相对于当前节点的节点集. 使用语法:轴名称::节点名称 例://input[@data-value="SXRYNAME"]/parent::td/foll ...

  4. 第六章 深入分析ClassLoader工作机制

    补充(非书中): Java 源程序(.java 文件)在经过 Java 编译器编译之后就被转换成 Java 字节代码(.class 文件).类加载器负责读取Java字节代码,并转换成 java.lan ...

  5. jQ版大图滚动

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. Linux quota命令参数及用法详解---Linux磁盘配额限制设置和查看命令

    功能说明:显示磁盘已使用的空间与限制. 语 法:quota [-quvV][用户名称...] 或 quota [-gqvV][群组名称...] 补充说明:执行quota指令,可查询磁盘空间的限制,并得 ...

  7. thingsboard在windows下安装和使用

    在官网下载thingsboard和tb-gateway 需要安装java8 thingsboard服务安装 https://thingsboard.io/docs/user-guide/install ...

  8. flask系列九之使用falsk建立项目总结

    待续.... 源码地址:https://gitee.com/FelixBinCloud/ZhiLiaoDemo/tree/master/ZhiLiao

  9. ADO.NET主要组件

  10. Win8.1（64bit) Hyper-V 安装Ubuntu 14.04LTS(64 bit)

    为了学习在Linux平台下开发,时隔将近一年多,重新搭建开发环境. 写文档确实很费时间,不过还是很有必要写的,这么一个简单的事情花了接近3个小时才算最终大功告成. 像这种连环嵌套的问题,一旦超过了1个 ...