H5 瀏覽器自定義使用者控

但是原生控制項往往無法滿足我們的一些需求，所以自定義使用者控制項還是很必要的。

首先宣告乙個變數，我們把做如下定義

let videoelement = document.getelementbyid('video');
let $videoelement = $('#video');

暫停和開始

暫停和開始是最基本的功能了，實現起來很簡單

開始：

videoelement.play()

暫停：

videoelement.pause()

the play() request was interrupted by a call to pause().

let isplaying = videoelement.currenttime > 0 && !videoelement.paused && !videoelement.ended && videoelement.readystate > 2;

最後暫停/開始事件的方法如下：

let playpausetoggle = function(e)
else 
return false;
}

let numbertotime = function(number)
if(second<10)
return minues + ':' + second;
}

以及監聽對應事件並更新當前時間的**如下

$videoelement.on('loadedmetadata', function() );
$videoelement.on('timeupdate', function() );

00:00 / 00:00

$videoelement.on('timeupdate', function() )

緩衝進度條和上面的實現基本一致，對應上面currentpos值的是

let currentbuffer = videoelement.buffered.end(0)

進度條不但要能看進度，還要能拖拽進度

拖拽進度的思路是：根據滑鼠在進度條上的mousedown事件和mouseup事件滑鼠的 x 座標量（含正負）變化來確定當前進度的變化程度。

具體**如下：

let timedrag = false;   /* drag status */
$('.progress').mousedown(function(e) );
$(document).mouseup(function(e) 
});$(document).mousemove(function(e) 
}); 
let updatebar = function(x) 
if(percentage < 0) 
//更新進度條和當前時間
$('progress-bar').css('width', percentage+'%');
videoelement.currenttime = maxduration * percentage / 100;
};

音量的控制很容易，主要借助以下方法和屬性，具體的互動可以隨心所欲的實現。之前還有看過一篇文章是介紹喪心病狂的音量鍵的，可以學習學習[滑稽]：

videoelement.muted = true //靜音 videoelement.muted = false //解除靜音 videoelement.volume = 1 //設定音量為最大值 videoelement.volume = 0.5 //設定音量為50%

videoelement.volume = 0 //設定音量為最小值

全屏是乙個相容起來有點麻煩的功能。

如果你要為 firefox 寫使用者控制項的話，呼叫全屏 api 的就得是和的共同父元素,不然會發現全屏後，你的使用者控制項看不到了。（但然，firefox 原生的使用者控制項比 chrome 的好看一百倍，所以你要是用原生的使用者控制項，那直接element.requestfullscreen()就行）

同時我們也記下這個 tips ：能呼叫全屏 api 的不只是

//全屏
function fullscreenon(element)  else if(element.mozrequestfullscreen)  else if(element.msrequestfullscreen) else if(element.orequestfullscreen) else if(element.webkitrequestfullscreen)
else
$controls.css('z-index','2147483647');
}

此處傳入的值就是videoelement

`(videoelement = document.getelementbyid('video');)`

同樣的，退出全屏模式的**如下：

function fullscreenoff()  else if (document.m***itfullscreen)  else if (document.mozcancelfullscreen)  else if(document.orequestfullscreen) else if (document.webkitexitfullscreen) else 
$('.live__playcontrol').css('z-index','1');
}

let isfullscreen =  document.fullscreenelement ||
document.webkitfullscreenelement ||
document.mozfullscreenelement ||
document.msfullscreenelement

文中已寫，**如下

let isplaying = videoelement.currenttime > 0 && !videoelement.paused && !videoelement.ended && videoelement.readystate > 2;

firefox 全屏後，自定義的使用者控制項不見了

文中已寫，和其他瀏覽器不同，firefox 不是用 ``元素的 dom 物件去呼叫`requestfullscreen()`,而是用 ``元素的父元素去調。

shadowdom 隱藏的問題

如果你發現，你明明把元素的屬性controls去掉了，但是原生控制項依然顯示，那麼只有用 css 去乾掉它

video::-webkit-media-controls-enclosure

H5 瀏覽器自定義使用者控

自定義h5 鍵盤

H5 自定義資料屬性

自定義chromium瀏覽器

H5 瀏覽器自定義使用者控

自定義h5 鍵盤

H5 自定義資料屬性

自定義chromium瀏覽器

相關推薦