方案一:使用preload進行預加載
方案一:使用方法
<!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>Document</title>
</head>
<body>
<button id="btn">開始播放</button>
<video
id="v1"
src="http://k.sohu.com/static/sugar-workshop/1908_parade/1.0.0/asset/c1/video.mp4"
playsinline="true"
></video>
<!-- <video id="v2" src="http://k.sohu.com/static/sugar-workshop/1908_parade/1.0.0/asset/c2/video.mp4"></video> -->
<!-- <video id="v3" src="http://k.sohu.com/static/sugar-workshop/1908_parade/1.0.0/asset/c3/video.mp4"></video> -->
</body>
<script>
window.onload = function () {
var getDom = function (id) {
return document.getElementById(id)
}
getDom('btn').addEventListener('click', function () {
getDom('v1').play()
})
getDom('v1').addEventListener('play', function () {
var video = document.createElement('video')
video.src = `http://k.sohu.com/static/sugar-workshop/1908_parade/1.0.0/asset/c1/video.mp4`
video.preload = 'auto'
document.body.appendChild(video)
})
}
</script>
</html>
方案一:結果與結論
- 結果失敗
- 結論: 只用在html中直接加入
perload = auto才有可能實現預加載, 並且ios不支持, android可能支持, 取決於瀏覽器
方案二:使用xhr進行預加載
方案二:使用方法
<body>
<button id="btn1">開始播放1</button>
<button id="btn2">開始播放2</button>
<video id="v1" src="http://k.sohu.com/static/sugar-workshop/1908_parade/1.0.0/asset/c1/video.mp4"
playsinline="true"></video>
<!-- <video id="v2" src="http://k.sohu.com/static/sugar-workshop/1908_parade/1.0.0/asset/c2/video.mp4"></video> -->
<!-- <video id="v3" src="http://k.sohu.com/static/sugar-workshop/1908_parade/1.0.0/asset/c3/video.mp4"></video> -->
<script>
window.onload = function () {
var getDom = function (id) {
return document.getElementById(id)
}
getDom('btn1').addEventListener('click', function () {
getDom('v1').play()
})
getDom('btn2').addEventListener('click', function () {
getDom('v2').play()
})
getDom('v1').addEventListener('play', function () {
var myVideo = document.createElement('video')
var r = new XMLHttpRequest();
r.onload = function () {
myVideo.src = URL.createObjectURL(r.response)
myVideo.id = 'v2'
myVideo.playsInline = true
// Android中可以自動播放, ios中需要一個click的明確時間進行觸發, 但是都可以支持load加載事件
// myVideo.play()
}
// 此處進行支持的視頻播放格式
// if (myVideo.canPlayType('video/mp4;codecs="avc1.42E01E, mp4a.40.2"'))
r.open('GET', 'http://k.sohu.com/static/sugar-workshop/1908_parade/1.0.0/asset/c2/video.mp4')
r.responseType = 'blob'
r.send()
document.body.appendChild(myVideo)
})
}
</script>
</body>
方案二:結果結論
- 可以提前加載視頻, 不需要等待瀏覽器的任何行為
- 但只能提前讀取整個視頻, 無法進行部分預加載
記錄實用方案
- 最好不要用{display: none}或者{width:0;height:0;}的方式，因為這樣視頻元素會處於未激活的狀態，給后續的處理帶來麻煩。最佳的方式是將視頻設置成1x1像素大小，放在視覺邊緣的位置。
<!--iOS-->
<!-- webkit-playsinline 屬性需要 webview.allowsInlineMediaPlayback = YES -->
<video webkit-playsinline width="1" height="1" class="vplayinside notaplink" x-webkit-airplay controls loop="loop" src="<%=src%>"></video>
<!--Android-->
<video width="1" height="1" controls loop="loop" src="<%=src%>"></video>
