在HTML5中的音頻和視頻標簽之間切換
[英]Switch between audio and video tags in HTML5
問題描述
有沒有一種方法可以在HTML5中即時切換音頻和視頻標簽？ 這意味着如果同一源以視頻開頭並選擇“視頻關閉”，則該源將被復制到音頻標簽並繼續播放。 反之亦然。
1 個解決方案
解決方案1
4 2015-06-25 01:08:01
當然-只需暫停所有正在播放的內容，在要開始的元素上設置<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>
HTML5 2音頻標簽
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.