移動端<video>視頻標籤

08-15

移動端<video>視頻標籤

視頻初始化在不同設備上的差異

ISO 微信瀏覽器是Chrome的內核，安卓微信瀏覽器是X5內核。

在微信瀏覽器內，安卓端和ios端下的video

參數說明

小窗播放

（ios微信6.5.3及其之後的版本中，webview默認支持小窗播放。）

事件

//獲取對象,example_video_1就是video標籤的id值var myPlayer = videojs(「example_video_1″);myPlayer.play();//播放myPlayer.pause();//暫停var whereYouAt = myPlayer.currentTime();//獲取播放進度：myPlayer.currentTime(120);//設置播放進度：//視頻持續時間，載入完成視頻才可以知道視頻時長，且在flash情況下無效var howLongIsThis = myPlayer.duration();//緩衝，就是返回下載了多少var whatHasBeenBuffered = myPlayer.buffered();var howMuchIsDownloaded = myPlayer.bufferedPercent();//百分比的緩衝var howLoudIsIt = myPlayer.volume();//獲取聲音大小myPlayer.volume(0.5);//設置聲音大小（0-1之間）myPlayer.enterFullScreen();//全屏//添加事件myPlayer.addEvent(「eventName」, myFunc);//刪除事件myPlayer.removeEvent(「eventName」, myFunc);

監控下載進度

// 視頻時長var duration = video.duration // 獲取視頻已經下載的時長function getEnd(video) { var end = 0 try { end = video.buffered.end(0) || 0 end = parseInt(end * 1000 + 1) / 1000 } catch(e) { } return end}

progress事件表示視頻在載入，但是它的觸發頻率和時機並不規律，最佳做法是通過一個定時器去實時獲取end，當end >= duration時，表示已經下載完畢，再終止定時器。

var timer = setInterval(function() { var end = getEnd(video), duration = video.duration if(end < duration) { return } clearInterval(timer)}, 1000)

全部下載後再播放

假設播放短視頻，如果網路不佳，會造成播放斷斷續續，在iOS中這種停頓還沒有一個明確的等待提示，這不是一個好的體驗，那麼是否可以將視頻全部下載完畢再播放呢？

在iOS中，可以在視頻剛開始下載的時候馬上暫停，此時下載還將繼續，可以做一個loading的菊花告知視頻正在載入，然後等到視頻全部下載完再開始播放。

$(video).one(loadeddata, function() { // 暫停，但下載還在繼續 video.pause() // 啟動定時器檢測視頻下載進度 var timer = setInterval(function() { var end = getEnd(video), duration = video.duration if(end < duration) { return } var width = $(video).parent().width() // 下載完了，開始播放吧 $(video).attr{ width: width, height: width } video.play() clearInterval(timer) }, 1000)})

ios設備中視頻無法播放

檢查是否是格式問題，轉換視頻格式編碼

解決ios系統下，視頻不能自動播放的問題

利用微信的JSAPI 的WeiixinJSBridgeReady()

HTML 禁止拖動Video進度條

獲取進度條的時間

var video = document.getElementById("my-video"); //獲取video對象var time1=video.currentTime;//設置進度條

2. 判斷視頻前一秒和後一秒的時間差大於一秒的話，就讓他們設置成前一秒的進度

<!doctype html><html> <head> <meta charset="utf-8"> <title>Video.js 5.18.4</title> <link href="css/video-js.css" rel="stylesheet">  <script src="js/videojs-ie8.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script> </style> <script type="text/javascript"> var int = self.setInterval("setControl()", 1) var int = self.setInterval("tesst()", 100) //讓其一直顯示進度條 function setControl() { var video = document.getElementById("my-video"); //獲取video對象 video.controls = true; //設置控制條顯示 } var zq = 0; var zh = -1; var hou = 0; function tesst() { var v2 = document.getElementById("v2"); v2.innerHTML = hou; var s = document.getElementById("zzbf"); var b = document.getElementById("zzbf2"); var v1 = document.getElementById("v1"); var v3 = document.getElementById("v3"); zq = zq + 1; zh = zh + 1; var video = document.getElementById("my-video"); //獲取video對象 var time1 = video.currentTime; var xc = time1 - hou; v3.innerHTML = xc; if(xc > 2) { document.getElementById("my-video").pause(); video.currentTime = hou; } if(xc <= -2) { } hou = time1; v1.innerHTML = time1; s.innerHTML = zq; b.innerHTML = zh; } var i = 0; function stop() { //點擊暫停播放 if(i == 0) { document.getElementById("my-video").pause(); i = 1; } else { document.getElementById(my-video).play(); i = 0; } } </script> </head> <body> <div class="m" id="bf"> 現在<span id="zzbf">0</span> 前一秒<span id="zzbf2">0</span></br> 視頻當前播放:<span id="v1">0</span>    視頻前一秒: <span id="v2">0</span>    相差:<span id="v3">0</span> <video id="my-video" controls preload="meta" height="70%" width="100%" onclick="stop()" data-setup="{}"> <source src="zgr.mp4" type="video/mp4"> </video> </div> </body></html>

3. 小程序video並沒有提供屬性禁止進度條拖動。但video提供了一個方法bindtimeupdate 可以時時檢測視頻的進度。另外也提供了一套API,其中就有對視頻的控制。

通過它可以控制視頻的播放,暫停，跳轉進度。在沒有拖動的情況下通過bindtimeupdate檢測到的視頻進度應該是1秒(更低)的1秒的更新進度，但是在拖動的情況下我們就能檢測到拖動後的進度和拖動之前的相差很多，這個地方就需要設置一個範圍了。我是設置的前一個進度和後一個進度相差在3秒以上的那麼就利用seek 這個方法跳轉到前面的保存好的進度。這裡並沒有直接禁止進度條不能拖動，但是利用跳轉進度也很巧妙的解決了這個問題。

//獲取上一次的時間var lastTime = wx.getStorageSync(lastTime);//轉化為整數現在的時間var time = parseInt(nowTime);//保存現在的時間wx.setStorageSync(that.data.model.CourseID.toString()+ app.userInfo.UserCode, time);//相差3秒if ((parseInt(nowTime) - parseInt(lastTime)) > 3) { //跳轉到上次的進度 that.videoContext.seek(parseInt(lastTime)); console.log(上次的時間 + lastTime + 現在的時間 + nowTime)}

video全屏

判斷瀏覽器是否支持requestFullscreen

首先是一段判斷瀏覽器是否支持h5全屏api（requestFullscreen）的代碼，如下：

/* [isFullscreenEnabled 判斷全屏模式是否是可用] @return [支持則返回true,不支持返回false]*/function isFullscreenEnabled(){ return document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled || false;}

區分一下全屏的兩種情況

局部全屏，這裡得把使用h5全屏api（requestFullscreen）和使用瀏覽器自帶的全屏快捷鍵F11區分開來，

圖1：這是未進行任何全屏下的狀態

圖2：這是使用h5全屏api（requestFullscreen）後的全屏

圖3：這是使用瀏覽器自帶的全屏快捷鍵F11達到的全屏

效果顯而易見，按F11快捷鍵的全屏只是把瀏覽器地址欄給隱藏掉了而已，而h5的全屏api將「需要全屏的dom元素」給全屏了，這個時候就無需判斷F11快捷鍵的全屏了，只需判斷h5全屏的屬性（fullscreenElement）即可。

第二種：整個頁面被一個標籤鋪滿，頁面沒有出現滾動條的全屏（通常是在做網頁遊戲），在這種情況下，使用h5全屏api（requestFullscreen）和使用瀏覽器自帶的全屏快捷鍵F11達到的效果是一樣的，如下圖。

在這種情況下，全屏判斷就得考慮是否是按了F11鍵全屏，此時，就不能使用h5的判斷全屏的屬性（fullscreenElement）去判斷全屏了，此屬性只在調用setFullscreen函數全屏時判斷有效，而在使用瀏覽器「F11」全屏快捷鍵的時候無效，這個時候得根據瀏覽器可視區域與電腦屏幕大小做比較，來判斷是否全屏，無論是setFullscreen函數還是按「F11」親測有效。代碼如下：

聲明：以上內容均為網站搜索整理，感謝各位創作者的貢獻。