本文轉載自千反田丷，感謝博主的貢獻，原文地址：https://blog.csdn.net/ArturiaTop/article/details/80154486
直接複製原博主的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Video Study</title>
</head>
<body>
<!-- 基礎用法，controlslist可以控制工具欄，如下、全屏等功能 -->
<video src="./test.mp4" width="400" height="255" controls controlslist="nodownload"></video>
<!-- 貼圖 poster -->
<video src="./test.mp4" width="400" height="255" controls poster="./poster.jpg"></video>
<!-- 自動播放 autoplay -->
<video src="./test.mp4" width="400" height="255" controls autoplay></video>
<!-- 默認靜音 muted -->
<video src="./test.mp4" width="400" height="255" controls autoplay muted></video>
<!-- 循環播放 loop -->
<video src="./test.mp4" width="400" height="255" controls autoplay muted loop></video>
<!-- 預加載 preload -->
<video src="./test.mp4" width="400" height="255" controls autoplay muted loop preload></video>
<!-- 控制音量 -->
<video id="_volume" src="./test.mp4" width="400" height="255" controls autoplay></video>
<script type="text/javascript">
var v = document.getElementById('_volume');
v.volume = 0.3;
</script>
<!-- 播放時間控制 -->
<video id="_time" src="./test.mp4" width="400" height="255" controls autoplay></video>
<script type="text/javascript">
var v = document.getElementById('_time');
console.log(v.currentTime);
v.currentTime = 60; // 單位是秒
</script>
<!-- 播放地址控制 -->
<video id="_src" src="./test.mp4" width="400" height="255" controls autoplay></video>
<script type="text/javascript">
var v = document.getElementById('_time');
console.log(v.src);
setTimeout( function() {
v.src = '';
}, 3000);
</script>
<!-- 備用地址切換 -->
<video id="_source" width="400" height="255" controls poster="./poster.jpg">
<source src="./a.mp4" type="video/mp4">
</video>
<script type="text/javascript">
var v = document.getElementById('_source');
for (var i = 0; i < 3; i++) {
var newSource = document.createElement('source');
newSource.src = './b' + i + '.mp4';
newSource.type = 'video/mp4';
v.appendChild(newSource);
}
var newSource = document.createElement('source');
newSource.src = './test.mp4';
newSource.type = 'video/mp4';
v.appendChild(newSource);
setTimeout(function () {
console.log(v.currentSrc);
var sources = v.getElementsByTagName('source');
console.log('sourecs', sources);
}, 1000);
</script>
<!-- video事件 -->
<video id="vs" src="./test.mp4" width="400" height="255" controls></video>
<script type="text/javascript">
var v = document.getElementById('vs');
// 加載開始
v.addEventListener('loadstart', function(e) {
console.log('loadstart');
});
// 視頻總時長髮生變化時
v.addEventListener('durationchange', function(e) {
console.log('durationchange', v.duration);
});
// 源數據已經加載完成
v.addEventListener('loadedmetadata', function(e) {
console.log('loadedmetadata');
});
// 沒有足夠的視頻幀和音頻幀數據，播放下一個視頻的片段
v.addEventListener('loadeddata', function(e) {
console.log('loadeddata');
});
// 正在下載數據
v.addEventListener('progress', function(e) {
console.log('progress');
});
// 已經準備完畢，可以正確播放了
v.addEventListener('canplay', function(e) {
console.log('canplay');
});
// 可以流暢的播放了
v.addEventListener('canplaythrough', function(e) {
console.log('canplaythrough');
});
// 狀態改爲播放時觸發
v.addEventListener('play', function(e) {
console.log('play');
});
// 狀態改爲暫停時觸發
v.addEventListener('pause', function(e) {
console.log('pause');
});
// 點擊進度條
v.addEventListener('seeking', function(e) {
console.log('seeking');
});
// 點擊進度條後數據加載完畢
v.addEventListener('seeked', function(e) {
console.log('seeked');
});
// 點擊進度條後在等待數據
v.addEventListener('waiting', function(e) {
console.log('waiting');
});
// 只要從暫停狀態到播放狀態就會觸發
v.addEventListener('playing', function(e) {
console.log('playing');
});
// 播放完畢
v.addEventListener('ended', function(e) {
console.log('ended');
});
// 播放出錯
v.addEventListener('error', function(e) {
console.log('error', e);
});
</script>
</body>
</html>