解決html5 video audio 遇到的問題

1.在移動端無法播放或者白屏的問題

安卓 ios 加入 webkit-playsinline playsinline 即可

<video muted src=""  loop="loop" autoplay="autoplay" webkit-playsinline playsinline></video>

微信瀏覽器 需要監聽 WeixinJSBridgeReady 方法

 <video muted src=""  loop="loop" autoplay="autoplay" webkit-playsinline playsinline id="video"></video>
    document.addEventListener("WeixinJSBridgeReady", function () { 
        document.getElementById('video').play(); //視頻自動播放
    }, false); 

2.video audio play()方法報錯

報錯原因：play()方法屬於DOM對象方法，$(’#audio’)爲jquery對象

解決辦法：將jquery對象轉換爲DOM對象

兩種轉換方式將一個jQuery對象轉換成DOM對象：[index]和.get(index);
(1)jQuery對象是一個數據對象，可以通過[index]的方法，來得到相應的DOM對象。
如：var audio =$(’#audio’) ; //jQuery對象
var au=audio [0]; //DOM對象

(2)jQuery本身提供，通過.get(index)方法，得到相應的DOM對象
如：var audio =$(’#audio’) ;//jQuery對象
var au=audio.get(0); //DOM對象

還有一種就是 直接獲取dom對象 document.documentElement

3.移動端默認全屏解決方法

<video controls="controls"   poster=''   src=''   preload="auto"    x5-playsinline="" playsinline="" webkit-playsinline=""  >

4.播放結束 默認 回到最初的樣子

var video = document.getElementsByTagName(‘video’)[0];
video.addEventListener(‘ended’,function(){
$(".video_play").show(); // 播放按鈕
$(’#video’).removeAttr(‘controls’) // 移除控件
const videoSrc = video.currentSrc;
video.src = ‘’;
video.src = videoSrc;
},false);