如何为我的HTML视频添加缓冲？

Question

我在页面上有多个视频。

<div class="row text-center">
    <video width="320" height="240" controls class="myvideo">
        <source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>

<div class="row text-center">
    <video width="320" height="240" controls class="myvideo">
        <source src="http://www.html5videoplayer.net/videos/fantasy.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>

我想为它们添加缓冲事件。而且当我点击视频 1 的时候，正在播放的视频 2 应该自动停止。我该如何实现这个功能呢？它们有一个共同的类。我需不需要给它们分别设置id呢？

- Ali Zia

Answer 1

给你的视频添加Id：

<video width="320" height="240" controls class="myvideo" id="myVideoOne">
<video width="320" height="240" controls class="myvideo" id="myVideoTwo">

用于缓冲：

var vid = document.getElementById("myVideoOne");
alert("Start: " + vid.buffered.start(0)
    + " End: " + vid.buffered.end(0));

var vid = document.getElementById("myVideoTwo");
alert("Start: " + vid.buffered.start(0)
    + " End: " + vid.buffered.end(0));

为了停止自动播放，您可以在videoPlay1和videoPlay2函数中使用以下代码：

function videoPlay1() {
    var video1 = document.getElementById("myVideoOne");
    var video2 = document.getElementById("myVideotwo");

    if (video1.paused) {
        video1.play();
        video2.pause();
    } else {
        video1.pause();
        video2.pause();
    }
}

function videoPlay2() {
    var video1 = document.getElementById("myVideoOne");
    var video2 = document.getElementById("myVideotwo");

    if (video2.paused) {
        video2.play();
        video1.pause();
    } else {
        video1.pause();
        video2.pause();
    }
}

示例：要为myVideoOne设置加载器，您可以使用以下jQuery代码：

css：

video.loading {
    background: black url(/yourGifImg.gif) center center no-repeat;
}

jQuery：

$('#myVideoOne').on('loadstart', function (event) {
    $(this).addClass('loading')
});
$('#myVideoOne').on('canplay', function (event) {
    $(this).removeClass('loading')
});

- Simo

---

我无法在我的视频上获取加载器。 - Ali Zia

我为你的视频加载器添加了一个jQuery，你可以使用一个gif。 - Simo