解决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);