正文從這裡開始
首先結構搭一下：
class="video-box"
id="videobox">
class="video-box-body">
class="video-body"
id="videobody"
src="img/test.mp4">
您的瀏覽器不支援video
video>
class="video-control"
id="videocontrol">
class="pull-left fontzero control-leftview">
class="control-btn loadbtn"
id="loadbtn">
div>
class="control-btn playbtn"
id="playpausebtn">
div>
div>
class="pull-left fontzero progress-box">
class="progress-box-body">
class="current-time pull-left"
id="currenttime">00:00div>
class="durationbar-box pull-left">
class="durationbar"
id="durationbar">
class="bufferbar"
id="bufferbar">
div>
class="currentbar"
id="currentbar">
div>
class="drawbar"
id="drawbar">
div>
div>
div>
class="duration-time pull-left"
id="durationtime">00:00div>
div>
div>
class="pull-left fontzero control-rightview">
class="control-btn mutedbtn"
id="mutedbtn">
div>
class="control-btn fullscreenbar"
id="fullscreenbar">
div>
div>
div>
div>
div>js部分
/**首先將需要操作的元素儲存為變數
* 建議大家在做任何dom操作的時候都先儲存為乙個變數
* 防止頻繁的尋找dom節點，降低了頁面效能，雖然現在裝置好了，
* 但是優化還是有必要的，點點優化帶來的是更加良好的使用者體驗
**/var loadbtn=$('#loadbtn');//重新整理鍵
var mutedbtn=$('#mutedbtn');//音量鍵
var fullscreenbar=$('#fullscreenbar');//全屏鍵
var durationbar=$('#durationbar');//總進度條
var bufferbar=$('#bufferbar');//緩衝進度條
/** * 因為我使用的jquery,外掛程式是不能直接呼叫video中的事件的
* 所以需要使用get()方法將jquery物件轉化為dom物件，
* 進而去使用video的各個事件
**/var videodom=videobody.get(0);
/*** 下面只是萬千方法中的一種，大家參考即可
**/var inittimelength = function
(timelength);
/****/
function
load
() /**
**/function
playpause
()else
}/**
* 音量鍵的開啟和關閉
**/function
muted
() /**
**/function
playtime
());
videobody.on('timeupdate',function
());
drawbar.animate();
});}
playtime();
/**緩衝進度條**/
function
buffer
(),'fast');
// 在範圍內每500毫秒進行一次遞迴，也就是呼叫一下自己;
if(currentbuffer500);}}
buffer();
loadbtn.on('click',function
());
play.on('click',function
());
fullscreenbar.on('click',function
() else
});// 音量鍵的開啟關閉
mutedbtn.on('click',function
());
/*video樣式*/
.video-box
.video-box-body
.video-body
/*控制條樣式*/
.video-control
.control-leftview
.control-btn
.control-leftview
.control-btn
.progress-box
.progress-box-body
.current-time, .duration-time
.current-time
.duration-time
.durationbar-box
.durationbar
.bufferbar, .currentbar
.currentbar
.drawbar
.control-rightview
.control-rightview
.control-btn
.control-leftview
.control-btn
:last-child, .control-rightview
.control-btn
:first-child
.control-btn
.loadbtn
.control-btn
.playbtn
.control-btn
.playbtn
.pausebtn
.control-btn
.mutedbtn
.control-btn
.fullscreenbar
video
:-webkit-full-screen
video
::-webkit-media-controls
h5 video標籤在ios8,9無法設定靜音
video設定靜音，在ios8,io9發現都無法靜音，得出結論如下 1 如果預設給video標籤加muted屬性，除錯獲取到的為true，但是依然有聲音，即 即使設定為true，也是有聲音 2 通過js改變muted是無法改變ios8下的值的，改變了之後列印依然為改變之前的 3 網上看到其他的乙個v...
html5 video標籤相容性與自定義控制項
video不相容ie8及之前的版本和opera mini。格式上mpeg4 h.264相容大部分瀏覽器，除低版本firefox和低版本opera，這些可以通過用ogg格式解決，而webm是一種開放 免費的格式。對於ie8及以下版本可以嵌入標籤。以下為 123 4567 891011 1213 141...
自定義h5 鍵盤
結果示意圖如下 1.父元件 father.vue content weixin title 巨集達超市 inputform formtitle 消費金額 importform moneyicon importmoney cursor v show cursor style moneyinfo typ...