在手機(jī)里做到視頻自動(dòng)播放
遇到的問題
1，video標(biāo)簽里有個(gè)autoplay的屬性。在pc端可以實(shí)現(xiàn)自動(dòng)播放。但是在移動(dòng)端，為了避免浪費(fèi)流量。自動(dòng)播放幾乎被禁止。需要用戶手動(dòng)觸發(fā)。
chrome官方：https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
2，即使播放video視頻，也會(huì)出現(xiàn)很多問題。比如全屏播放、控制條無(wú)法隱藏。全屏影響交互，控制條很不美觀。
如何解決
方案一：canvas繪制video
用canvas繪制video，利用requestAnimationFrame，將視頻每一幀繪制成canvas。
以下為demo。（不屬于業(yè)務(wù)代碼和公司內(nèi)部文件，視頻選自w3cschool）可以模擬點(diǎn)擊進(jìn)行觸發(fā)。（假裝實(shí)現(xiàn)自動(dòng)播放。）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="height:2000px">
<video id="video" controls loop width='300' autoplay webkit-playsinline="true" src='http://www.w3school.com.cn/example/html5/mov_bbb.mp4'></video>
<p>
? <button type="button" id='btn-play'>開始</button>
? <button type="button" id='btn-pause'>暫停</button>
</p>
</body>
<script type="text/javascript">
/*
* video視頻轉(zhuǎn)成canvas（兼容至IE8+）
* Author: shaojiancong@baidu.com
*
*? 使用方法：
*? ? ? var videoCanvas = new VideoToCanvas(videoDom);
*
*? 對(duì)象的屬性：
*? ? ? 暫無(wú)。
*
*? 對(duì)象的方法：
*? ? ? play? ? ? 播放視頻
*? ? ? pause? ? ? 暫停視頻
*? ? ? playPause? 播放或暫停視頻
*? ? ? change(src) 切換視頻。參數(shù)src為切換的視頻地址
*/
var VideoToCanvas = (function(window, document) {
? function VideoToCanvas(videoElement) {
? ? if(!videoElement) {return;}
? ? var canvas = document.createElement('canvas');
? ? canvas.width = videoElement.offsetWidth;
? ? canvas.height = videoElement.offsetHeight;
? ? ctx = canvas.getContext('2d');
? ? var newVideo = videoElement.cloneNode(false);
? ? var timer = null;
? ? var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
? ? var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
? ? function drawCanvas() {
? ? ? ctx.drawImage(newVideo, 0, 0, canvas.width, canvas.height);
? ? ? timer = requestAnimationFrame(drawCanvas);
? ? }
? ? function stopDrawing() {
? ? ? cancelAnimationFrame(timer);
? ? }
? ? newVideo.addEventListener('play', function() {
? ? ? drawCanvas();
? ? },false);
? ? newVideo.addEventListener('pause', stopDrawing, false);
? ? newVideo.addEventListener('ended', stopDrawing, false);
? ? videoElement.parentNode.replaceChild(canvas, video);
? ? this.play = function() {
? ? ? newVideo.play();
? ? };
? ? this.pause = function() {
? ? ? newVideo.pause();
? ? };
? ? this.playPause = function() {
? ? ? if(newVideo.paused) {
? ? ? ? this.play();
? ? ? } else {
? ? ? ? this.pause();
? ? ? }
? ? };
? ? this.change = function(src) {
? ? ? if(!src) {return;}
? ? ? newVideo.src = src;
? ? };
? ? this.drawFrame = drawCanvas;
? }
? return VideoToCanvas;
})(window, document);
</script>
<script>
var video = document.getElementById('video');
var canvasVideo = new VideoToCanvas(video);
//模擬click事件
//獲取btn
var btn = document.querySelector("#btn-play");
//創(chuàng)建event
var event = document.createEvent("MouseEvents");
// //初始化event
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
//click事件綁定事件處理程序
btn.onclick = function () {
? ? canvasVideo.play();
}
//觸發(fā)事件,一定要延遲觸發(fā)，等到視頻加載完成之后。
setTimeout(function(){
btn.dispatchEvent(event);
},2000)
//取消引用
btn.onclick = null;
document.querySelector('body').addEventListener('touchend',function(){
canvasVideo.play();
})
document.getElementById('btn-play').addEventListener('click', function() {
? canvasVideo.play();
}, false);
document.getElementById('btn-pause').addEventListener('click', function() {
? canvasVideo.pause();
},false)
</script>
</html>
方案二：將用戶上傳的video，轉(zhuǎn)化成gif，前端用gif圖展示動(dòng)態(tài)效果。
參考：https://jnordberg.github.io/gif.js/
這樣在移動(dòng)端瀏覽器展示的時(shí)候可以實(shí)現(xiàn)滾動(dòng)到某一位置，實(shí)現(xiàn)動(dòng)態(tài)播放。
還有一個(gè)問題，判斷網(wǎng)絡(luò)鏈接狀態(tài)
是wifi，還是蜂窩數(shù)據(jù)。
我看了一下官方文檔Network Information API，目前大部分瀏覽器還沒有實(shí)現(xiàn)。navigator.connection。
所以如果：
1，蜂窩數(shù)據(jù)下不播放，Wi-Fi下才播放：只能在客戶端才可以，通過(guò)jsbridge獲取網(wǎng)絡(luò)狀態(tài)。
2，如果網(wǎng)速ok就播放，網(wǎng)速慢不播放：采用下載一個(gè)指定圖片，檢測(cè)下載速度。
