音频/视频那些坑

音频/视频那些坑

  坑1:关于html5 video currentTime 在chrome浏览器下设定失败问题解决

     chrome下src需要在线视频完整引用地址

  坑2:window.onload方式获取audio.duration的值为NaN

     监听oncanplay

  坑3：js动态创建音频数量>6条以后，则无法显示

ex:
<video width="300" height="" id="myVideo" autobuffer="true" controls="controls">
        <source src="http://ofuamxwhl.bkt.clouddn.com/2mengmusanqian.mp4" type="video/mp4"></source>
</video>
    <p></p>
    <button type="button" id="forward" 
        onclick="forward()">快进15s</button>
    <button type="button" id="defaultPlaybackRate" 
        onclick="defaultPlaybackRate()">速率/2</button>

    <script type="text/javascript">
        window.onload = function() {
            var myVideo = document.getElementById("myVideo");
            //视频播放，快进视频触发 ontimeupdate是事件
            myVideo.oncanplay = function(){
                console.log("总时间" + myVideo.duration);
            }
            myVideo.ontimeupdate = function() {
                console.log("当前时间:" + myVideo.currentTime);
                if(myVideo.ended) {
                    console.log("视频播放结束");
                }
            }

        };

        function forward() {
            myVideo.currentTime += 15;
        }

        function defaultPlaybackRate() {
            myVideo.defaultPlaybackRate = 0.5;
            myVideo.load();
        }
    </script>

视频/音频格式播放检测

canPlayType 返回probably maybe 空字符串

    function checkAudio() {
        var myAudio = document.createElement("audio");

        if(myAudio.canPlayType) {
            if("" != myAudio.canPlayType('audio/mpeg')) {
                document.write("您的浏览器支持mp3编码。<br>");
            }
            if("" != myAudio.canPlayType('audio/ogg; codecs="vorbis"')) {
                document.write("您的浏览器支持oog编码。<br>");
            }
            if("" != myAudio.canPlayType('audio/mp4; codecs="mp4a.40.5"')) {
                document.write("您的浏览器支持aac编码。");
            }
        } else {
            console.log("您的浏览器不支持要检测的音频格式");
        }
    }

    function checkVideo() {
        var myVideo = document.createElement("video");

        if(myVideo.canPlayType) {
            if("" != myVideo.canPlayType('video/mp4;codecs="avc1.64001E"')) {
                document.write("您的浏览器支持 h264 编码。<br />");
            }
            if("" != myVideo.canPlayType('video/ogg;codecs="vp8"')) {
                document.write("您的浏览器支持 vp8 编码。<br />");
            }
            if("" != myVideo.canPlayType('video/ogg;codecs="theora"')) {
                document.write("您的浏览器支持 theora 编码。<br />");
            } else {
                console.log("您的浏览器不支持要检测的音频格式");
            }
        }
    }

    window.onload = function() {
        checkAudio()；
        checkVideo()
    }

Tips

//播放(继续播放)
audio.play();

//暂停
audio.pause();

//停止
audio.pause();
audio.currentTime = 0;

//重新播放
audio.currentTime = 0;
audio.play();

移动端video播放器

'<video class="my_video" status="0" style="object-fit: fill";  
poster="003.jpg"   x5-playsinline webkit-playsinline playsinline 
x5-video-player-type= h5  preload="auto">' +
'<source src="' + urll + '/' + itemR.PhoneFileUrl + '" type="video/mp4">' +
'</video>' 


----------
给video加上object-fit: fill;的style属性
解决video出现上下两个黑边
----------


mui('.ctn_tv').on('tap', '.my_video', function() {
var my_video_ary = document.getElementsByClassName("my_video");
    console.log("this_obj:" + this.paused);
    if(this.paused == true) { //当前点击的是    停止播放的    把前面正在播放的停止
        for(var i = 0; i < my_video_ary.length; i++) {
            if(my_video_ary[i].paused == false) {
                my_video_ary[i].pause();
                my_video_ary[i].setAttribute('status', '0');
            }
        }

        var status = this.getAttribute('status');
        if(status == '0') {
            this.setAttribute('status', '1');
            this.play();
        } else if(status == '1') {
            this.setAttribute('status', '0');
            this.pause();
        }

    } else if(this.paused == false) { //当前点击的是    正在播放的
        this.pause();
        this.setAttribute('status', '0');
    }

    //print pause.value
    this.addEventListener('ended', function() { //视频播放完的事件
        console.log("tv is overred");
        this.setAttribute('status', '0');
        this.pause();
    }, false);

});