h5使用video標籤播放視頻

html區域

<div class="video_file">
	<button id="video_btn" >播放/暫停</button>
	<img src="images/video-img.jpg" id="video_img" >
	<video name="media" id="video" preload="auto" >
		<source src="https://static.appstore.czfw.cn/video-jiayou2.mp4" type="video/mp4">
		<source src="https://static.appstore.czfw.cn/video-jiayou.webm" type="video/webm">
		<source src="https://static.appstore.czfw.cn/video-jiayou.Ogg" type="video/ogg">
		您的瀏覽器暫不支持視頻播放
	</video>
</div>

css 區域

.video_file {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 100%;
	height: 44vw;
}

.video_file button {
	background-image: url(http://static.kaiba315.com/video_bg_grey.png);
	background-color: transparent;
	background-size: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 50px;
	height: 50px;
	margin-left: -25px;
	margin-top: -25px;
	text-indent: -9999px;
	z-index:40;
	border: none;
}

.video_file #video_img,
.video_file video {
	width: 100%;
	height: 44vw;
}

.video_file #video_img {
	position: absolute;
	left: 0;
	top: 0;
}

#video_img,#video_btn{opacity: 1;}
#video_img.displayno,#video_btn.displayno{
         opacity: 0;
}   
.video_file video.hide{
  width:1px;
  height:1px;
}

js 區域

var myVideoBtn =document.getElementById("video_btn");
		var myVideo =document.getElementById("video");
		var myVideoImg =document.getElementById("video_img");
	function playVideo(obj) {
		if (myVideo.paused) {
			myVideo.play();
			$('#video_img').addClass('displayno');
			$('#video_btn').addClass('displayno');
			$("video").removeClass("hide");
		}
		else {
			myVideo.pause();
			$('#video_img').removeClass('displayno');
			$('#video_btn').removeClass('displayno');
			$("video").addClass("hide");
		}
	}
	myVideo.addEventListener("pause",function(){
		$('#video_img').removeClass('displayno');
		$('#video_btn').removeClass('displayno');
		$("video").addClass("hide");
	});
	$('.video_file').on('click',function(){
		playVideo(myVideo)
	})

有遮罩層存在時，視頻層級最高，遮罩層沒法遮擋問題

function shareAct(){
		$(".popUpBox").show();
		myVideo.pause();
		$('#video_img').removeClass('displayno');
		$('#video_btn').removeClass('displayno'); 
		$("video").hide();
	}
		//分享蒙版 關閉
    $(".popUpBox").click(function () {
    	$(this).hide();
    });

屬性說明

muted 靜音播放（iphone能夠，安卓不行）
poster 封面圖

方法說明

<!-- 音量控制 -->
  <video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_volume"></video>
<script>
    var video = document.getElementById('_volume')
    video.volume = 2 // 取值範圍：0 到 1，0 是靜音，0.5 是一半的音量，1 是最大音量（默認值）
  </script>
  
    <!-- 播放時間控制 -->
  <video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_time"></video>
  <script>
    var video = document.getElementById('_time')
    console.log(video.currentTime)  // 視頻當前正在播放的時間（單位：s），進度條拖到哪就顯示當前的時間
    video.currentTime = 60  // 默認從60秒處開始播放
  </script>
<!-- 播放地址切換 （常見於切換超清  高清 流暢，不一樣畫質的視頻地址不一樣） -->
  <video src="test.mp4" controls autoplay width="400" height="300" id="_src"></video>
  <script>
    var video = document.getElementById('_src')
    console.log(video.src)     // http://127.0.0.1:8001/test.mp4   絕對地址，DOM 中是相對地址
    // video.src = 'test-2.mp4'   // 直接替換掉了原來的視頻src
    setTimeout(() => {
      video.src = 'test-2.mp4'  // 播放到第 30s 的時候，自動切換視頻
    }, 30000)
  </script>
  
  <video src="test.mp4" controls width="400" height="300" id="video"></video>
  
  <script>
    var video = document.getElementById('video')

    // 一、loadstart：視頻查找。當瀏覽器開始尋找指定的音頻/視頻時觸發，也就是當加載過程開始時
    video.addEventListener('loadstart', function(e) {
      console.log('提示視頻的元數據已加載')
      console.log(e)
      console.log(video.duration)            // NaN
    })
	
	// 六、canplay：可播放監聽。當瀏覽器可以開始播放指定的音頻/視頻時觸發
    video.addEventListener('canplay', function(e) {
      console.log('提示該視頻已準備好開始播放')
      console.log(e)
    })
 // 八、play：播放監聽
    video.addEventListener('play', function(e) {
      console.log('提示該視頻正在播放中')
      console.log(e)
    })

    // 九、pause：暫停監聽
    video.addEventListener('pause', function(e) {
      console.log('暫停播放')
      console.log(e)
    })
	// 十二、waiting：視頻加載等待。當視頻因爲須要緩衝下一幀而中止，等待時觸發
    video.addEventListener('waiting', function(e) {
      console.log('視頻加載等待')
      console.log(e)
    })

    // 1三、playing：當視頻在已因緩衝而暫停或中止後已就緒時觸發
    video.addEventListener('playing', function(e) {
      console.log('playing')
      console.log(e)
    })

    // 1四、timeupdate：目前的播放位置已更改時，播放時間更新
    video.addEventListener('timeupdate', function(e) {
      console.log('timeupdate')
      console.log(e)
    })

    // 1五、ended：播放結束
    video.addEventListener('ended', function(e) {
      console.log('視頻播放完了')
      console.log(e)
    })

    // 1六、error：播放錯誤
    video.addEventListener('error', function(e) {
      console.log('視頻出錯了')
      console.log(e)
    })

    // 1七、volumechange：當音量更改時
    video.addEventListener('volumechange', function(e) {
      console.log('volumechange')
      console.log(e)
    })

插件播放 （zyMedia —— 一個輕量級媒體播放器） https://github.com/ireaderlab/zyMedia