在html5视频标记中更改视频时防止黑屏

时间:2015-09-12 11:00:09

标签: javascript html5 video html5-video

我在循环中默认播放欢迎视频,当用户点击更改视频按钮时,会开始播放另一个视频。但是在视频变化之间有大约1-3秒的停电。我想呈现我的视频,因为视频没有改变它仍在播放相同的视频[我希望它看起来像一个视频正在播放我不希望停电干扰它]

这是我如何改变视频

<!DOCTYPE html>
<html>
<head><title>Draw your gifts here</title></head>
<body>
<video width="1000" id="videotag" autoplay controls>
    <source src="media/welcome.mp4">
This browser does not support this format please upgrade your browser or use different browser
</video>
<button type="button" onClick="changeVideo()">Change Video</button>
</body>
<script>
function changeVideo(){
    var video_player = document.getElementById("videotag");
    video_player.src = "media/draw1.mp4";
}
</script>
</html>

1 个答案:

答案 0 :(得分:1)

您可以使用预加载自动来防止加载延迟

<video width="1000" id="videotag" autoplay preload="auto" controls>
   <source src="media/welcome.mp4">
   This browser does not support this format please upgrade your browser or use different browser
</video>