zoukankan      html  css  js  c++  java
  • html5 video使用autoplay属性时,声音混乱

    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;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({}, { "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()函数来达到自动播放功能;

    有不同解决方案的可以分享,谢谢!

  • 相关阅读:
    k8s 1.10 部署springcloud
    TF-IDF关键词提取步骤
    k8s 离线安装
    JWT对SpringCloud进行系统认证和服务鉴权
    centos7 安装 docker-registry
    Docker安装elasticsearch-head监控ES步骤
    tengine 配置应用防火墙
    elasticsearch6.1.3 集成分词器
    centos7 nginx tengine 安装
    elk 搭建
  • 原文地址:https://www.cnblogs.com/zlp520/p/6149492.html
Copyright © 2011-2022 走看看