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. 微信官方jssdk Demo

    1.html部分 <!DOCTYPE html> <!-- saved from url=(0028){sh:$selfUrl} --> <html><hea ...

  2. 在rac集群上开启OEM

    由于安装rac的时候没有开启oem,这里开启oem,方便管理 [oracle@rac01 ~]$ emca -config dbcontrol db -repos create -cluster ST ...

  3. StampedLock

    StampedLock是Java8引入的一种新的所机制,简单的理解,可以认为它是读写锁的一个改进版本,读写锁虽然分离了读和写的功能,使得读与读之间可以完全并发,但是读和写之间依然是冲突的,读锁会完全阻 ...

  4. Python实现SSH连接远程服务器

    首先需要安装paramiko模块 #-*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" import paramiko ssh = p ...

  5. pandas索引操作

    Pandas的索引操作 索引对象Index 1. Series和DataFrame中的索引都是Index对象 示例代码: print(type(ser_obj.index)) print(type(d ...

  6. leetcode812

    class Solution { public: double largestTriangleArea(vector<vector<int>>& points) { d ...

  7. 解读show slave status 命令判断MySQL复制同步状态

    解读show slave status 命令判断MySQL复制同步状态 1. show slave status命令可以显示主从同步的状态 MySQL> show slave status \G ...

  8. Usage of API documented as @since 1.8+”报错的解决办法

    参考资料 1.https://blog.csdn.net/a499477783/article/details/78967586/

  9. 游戏引擎架构Note1

    [游戏引擎架构] 1.第14章介绍的对游戏性相关系统的设计非常有价值.各个开发人员几乎都是凭经验设计,很少见有书籍对这些做总结. 5.通过此书以知悉一些知名游戏作品实际上所采用的方案. 6.书名中的架 ...

  10. Codeforces 1109D (树的计数问题）

    思路看这篇博客就行了:https://www.cnblogs.com/zhouzhendong/p/CF1109D.html, 讲的很好 今天学到了prufer编码,这是解决树上计数问题的一大利器,博 ...