Есть ли способ переключаться между аудио и видео тегами в HTML5 на лету? Это означает, что если тот же источник начинается с видео и выбирает «видео выключен», источник будет скопирован на звуковой тег и возобновит воспроизведение. То же самое и наоборот.Переключение между аудио и видео тегами в 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>
Что вас далеко и что вы пробовали? – NewToJS