獲取音頻文件使用自定義html 5視頻控件

我有一個頁面上的html5視頻和我想用作背景音樂的音頻文件。是否可以將音頻控件綁定到視頻控件中（靜音，音量，播放，暫停等）。音頻不能成爲視頻文件的一部分，因爲視頻暫停，我仍然喜歡背景音樂播放和循環播放。獲取音頻文件使用自定義html 5視頻控件

<video id="video" data-setup="{}" > 
    <source src="video/MyVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
    <source src="video/MyVideo.webmhd.webm" type='video/webm; codecs="vp8, vorbis"'> 
    <source src="video/MyVideo.oggtheora.ogv" type='video/ogg; codecs="theora, vorbis"' /> 
    <p>Your browser doesn't support HTML5. Maybe you should upgrade.</p> 
</video> 

<audio id="music" loop="loop"> 
    <source src="audio/background.ogg" type="audio/ogg" /> 
    <source src="audio/background.mp3" type="audio/mpeg" /> 
    <source src="audio/background.wav" type="audio/wav" /> 
    <p> Your browser doesn't support HTML5. Maybe you should upgrade.</p> 
</audio> 

     <input type="button" value="PLAY" id="playpause" onclick="playOrPause()" class="button_play"> 
     <input type="button" value="Mute" id="mutebutton" onclick="muteOrUnmute()" class="button_play"> 
     <input type="button" value="+" onclick="document.getElementById('video').volume+=0.2" class="button"> 
     <input type="button" value="-" onclick="document.getElementById('video').volume-=0.2" class="button">

和一些JavaScript

function playOrPause() { 
     if (video.ended || video.paused) { 
      video.play(); 
      document.getElementById("playpause").value="PAUSE"; 
     } else { 
      video.pause(); 
      document.getElementById("playpause").value="PLAY"; 
       } 
     } 

    var m = document.getElementById('mutebutton')[0]; 
    video.onvolumechange = function(e) { 
    mutebutton.value = video.muted ? 'Unmute' : 'Mute'; 
     } 


    function muteOrUnmute() { 
     if (video.muted) { 
      video.muted = false; 
      document.getElementById("mutebutton").value="Mute"; 
     } else { 
      video.muted = true 
      document.getElementById("mutebutton").value="Unmute"; 
       } 
       return false; 
     }

我是新來的JavaScript和HTML5，所以任何幫助將不勝感激。

來源

2013-01-11 Noob_C

請解釋由「音頻不能你是什麼意思視頻文件的一部分，因爲視頻暫停，我仍然喜歡背景音樂播放和循環播放。「這聽起來像是你想要兩套不同的控件：一種是暫停視頻並讓音頻繼續播放。 – dfmiller

@dfmiller我想要一套控件。音頻將在視頻暫停後繼續播放，因爲音頻會循環播放，而視頻（和視頻）中的音頻會在我爲其編寫Javascript的特定點處暫停播放。理想情況下，我只想讓音頻在視頻的播放按鈕被按下時開始播放，然後只能由視頻的靜音/取消靜音和音量控制進行控制。 –

好了，所以我做了一個變量我的音樂

var a =document.getElementById("music");

和連接播放功能一起我補充道。 a.play()我的播放按鈕和靜音/取消靜音按鈕，我這樣做

function muteOrUnmute() { 
     if (video.muted) { 
      video.muted = false; 
      a.muted = false; 
      document.getElementById("mutebutton").value="Mute"; 
     } else { 
      video.muted = true; 
      a.muted = true; 
      document.getElementById("mutebutton").value="Unmute"; 
       } 
       return false; 
     }

對於音量上下控制我這樣做：

<input type="button" value="+" onclick="document.getElementById('video').volume+=0.2; document.getElementById('music').volume+=0.1" class="button"> 
    <input type="button" value="-" onclick="document.getElementById('video').volume-=0.2; document.getElementById('music').volume-=0.1" class="button">

來源

2013-01-14 18:11:44

回答

相關問題