gpt4 book ai didi

javascript - html 视频之间的转换

转载 作者:行者123 更新时间:2023-11-28 05:42:34 25 4
gpt4 key购买 nike

我有一个 html5 web 应用程序,将在平板设备上显示。在此网络应用程序中,正在播放一个视频。用户可以选择视频中的不同区域来播放不同的视频。这是通过在不可见的图像上叠加区域标签来调用js来切换视频来完成的。我想知道是否有一种方法可以更快地加载这些视频,并可能添加某种视频过渡,使其看起来更专业。这是我当前的应用程序:

<!doctype html /> 
<html>
<body>
<div id="wrapper">
<video id="video" width="320" height="240" autoplay>
<source src="video1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<div style="position: absolute; left: 8px; top: 8px; z-index: 1;">
<img src="" width="320" height="240" usemap="#grid">
<map name="grid">
<area shape="rect" coords="0,0,160,240" href="javascript:loadLeftVideo()" alt="Left">
<area shape="rect" coords="161,0,320,240" href="javascript:loadRightVideo()" alt="Right">
</map>
</div>
</div>

<script>
function loadLeftVideo() {
document.querySelector("#video > source").src = "left.mp4"
var video = document.getElementById('video');
video.load();
video.play();
}

function loadRightVideo() {
document.querySelector("#video > source").src = "right.mp4"
var video = document.getElementById('video');
video.load();
video.play();
}
</script>
</body>
</html>

最佳答案

或者您可以尝试 this solution 。基于谷歌Media Source API .

关于javascript - html 视频之间的转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38797436/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com