Javascript 如何向HTML视频添加缓冲

我在一个页面上有多个视频

<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吗？

给你的视频提供ID：

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

要自动停止，您可以在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:

jquery：

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

---

我无法在我的视频中获取加载程序。我为你的视频加载程序添加了jquery，你可以使用gif

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

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