gpt4 book ai didi

javascript - 在 HTML5 中切换音频和视频标签

转载 作者:行者123 更新时间:2023-11-30 10:02:08 25 4
gpt4 key购买 nike

有没有办法在 HTML5 中即时切换音频和视频标签?这意味着如果同一源以视频开始并选择“视频关闭”,则该源将被复制到音频标签并继续播放。反之亦然。

最佳答案

当然 - 暂停正在播放的任何内容,设置 <source>在您要开始的元素上,并将新播放器设置为从另一个播放器停止的地方开始:

var playing = "video";

var audio = document.getElementById("audio");
var video = document.getElementById("video");

var source = document.createElement("source");
source.setAttribute("src", "http://vjs.zencdn.net/v/oceans.mp4");
source.setAttribute("id", "sourceElement");

video.appendChild(source);

video.play();

document.getElementById("toggleAV").onclick = function(e) {
switch (playing) {
case "video":
video.pause();
video.setAttribute("class", "hidden");
video.removeChild(source);
audio.appendChild(source);
audio.currentTime = video.currentTime;
audio.setAttribute("class", "");
audio.play();
playing = "audio";
break;
case "audio":
audio.pause();
audio.setAttribute("class", "hidden");
audio.removeChild(source);
video.appendChild(source);
video.currentTime = audio.currentTime;
video.setAttribute("class", "");
video.play();
playing = "video";
break;
}
};
html,
body {
height: 100%;
width: 100%;
}
.hidden {
display: none;
}
<!DOCTYPE html>
<html>

<head>
<meta charset=utf-8 />
<title>so</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
</head>

<body>

<video id="video" width="320" height="240" controls></video>
<audio id="audio" controls class="hidden"></audio>
<button id="toggleAV">Toggle AV</button>

</body>

</html>

关于javascript - 在 HTML5 中切换音频和视频标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31039294/

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