自定义停止按钮 HTML5 视频答案

【问题标题】：Custom Stop Button HTML5 Video自定义停止按钮 HTML5 视频
【发布时间】：2013-05-06 11:45:48
【问题描述】：

所以我尝试用自定义控件制作一个小视频，这是第一次，所以我不知道我在做什么。但是我已经让播放暂停按钮工作了，但是我如何制作一个停止按钮？

我的代码：

视频播放器：

<div class="videobox">
    <video id="video" width="100%" height="100%">
      <source src="testvideo.m4v" type="video/mp4">
      <p>
        Your browser doesn't support HTML5 video.
      </p>
    </video>
</div>

还有我的控件

<div class="buttonrow">
    <input type="range" id="seek-bar" value="0">
    <button type="button" id="play-pause" class="play">Play</button>
    <button type="button" id="mute">Mute</button>
    <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
    <button type="button" id="full-screen">Full-Screen</button>
</div>

希望有人可以帮助我:)

【问题讨论】：

标签： html video controls custom-controls html5-video

【解决方案1】：

HTML

<input type="button" value="play" id="playBtn" />
<input type="button" value="pause" id="pauseBtn" />
<input type="button" value="stop" id="stopBtn" />

jQuery

var source = "http://www.giorgiosardo.com/HTML5/audio/audio/sample.mp3"
var audio = document.createElement("audio"); audio.src = source;

$("#playBtn").click(function () {
    audio.play();
});

$("#pauseBtn").click(function () {
    audio.pause();
});

$("#stopBtn").click(function () {
    audio.pause();
    audio.currentTime = 0;
});

希望这会有所帮助。 Source

【讨论】：

我可以看到您的示例是针对音频的，对于视频也是如此吗？ :)
您可以为视频集成相同的逻辑。 - @user2354493
我建议你从源头上进行排列，看看天气是否适合你。 - @Legarndary
我的解决方案是这样的：stopButton.addEventListener("click", function() { video.pause(); video.currentTime = 0; playButton.innerHTML = "Play"; });