方案一:使用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}或者{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>