在HTML5中切換音頻和視頻標籤

是否有方法在HTML5中隨時切換音頻和視頻標籤？這意味着如果同一個信號源以視頻開始並選擇「關閉視頻」，則信號源將被複制到音頻標籤並繼續播放。反過來也是如此。在HTML5中切換音頻和視頻標籤

2015-06-25 John Kornick

你這是什麼有很多，你有什麼嘗試？ – NewToJS

當然 - 只是暫停任何的播放，設定你想創業，並設置新的球員開始元素的<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>

來源

2015-06-25 01:08:01 rphv

在HTML5中切換音頻和視頻標籤

回答

相關問題