有没有办法在 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/