Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/76.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 获取音频文件以使用自定义html 5视频控件_Javascript_Html_Html5 Video_Html5 Audio - Fatal编程技术网

Javascript 获取音频文件以使用自定义html 5视频控件

Javascript 获取音频文件以使用自定义html 5视频控件,javascript,html,html5-video,html5-audio,Javascript,Html,Html5 Video,Html5 Audio,我有一个html5视频页面和一个音频文件,我想作为背景音乐使用。是否可以将音频控制连接到视频控制(静音、音量、播放、暂停等)中。音频不能成为视频文件的一部分,因为视频暂停,我仍然希望播放并循环背景音乐 <video id="video" data-setup="{}" > <source src="video/MyVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source s

我有一个html5视频页面和一个音频文件,我想作为背景音乐使用。是否可以将音频控制连接到视频控制(静音、音量、播放、暂停等)中。音频不能成为视频文件的一部分,因为视频暂停,我仍然希望播放并循环背景音乐

<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和html5,因此希望您能提供帮助。

好的,所以我为我的音乐制作了一个变量

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">


请解释您所说的“音频不能成为视频文件的一部分,因为视频暂停,我仍然希望播放并循环背景音乐”是什么意思。听起来您需要两组不同的控件:一组暂停视频,允许音频继续播放。@dfmiller我需要一组控件。视频暂停后音频将继续播放,因为音频是循环的,而视频(和视频)中的音频将在我编写Javascript的特定点暂停。理想情况下,我只希望在按下视频播放按钮时开始播放音频,然后仅由视频的静音/取消静音和音量控制来控制。
    <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">