Question

我需要帮助我使用特定的JS来使HTML5视频在观看时播放。

代码：

$(document).ready(function() {
    // Get media - with autoplay disabled (audio or video)
    var media = $('#video1, #video2, #video3, #video4, #video5');
    var tolerancePixel = 10;

    function checkMedia(){
        // Get current browser top and bottom
        var scrollTop = $(window).scrollTop() + tolerancePixel;
        var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;

        //if ($(window).scrollTop() > $(window).height() - 100) {
        media.each(function(index, el) {
            var yTopMedia = $(this).offset().top;
            var yBottomMedia = $(this).height() + yTopMedia;

            if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
                $(this).get(0).play();
            } else {
                $(this).get(0).pause();
            }
        });

        //}
    }
    $(document).on('scroll', checkMedia);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:500px"></div>
<video muted id="video4" class="lightbulbs" width="100%" height="auto">
<source src="http://www.ddi.com.au/culture/img/lightbulbs.mp4" type="video/mp4">
</video>
<div style="height:500px"></div>

我从以下答案中获得了此代码：https://stackoverflow.com/a/26508106/10213848

我的问题是，视频播放完毕后，可以向上滚动再次触发它。我需要视频只能播放一次，而不会再次触发。

任何帮助将不胜感激。

Answer 1

您可以使用变量来标记视频是否已播放。如果已经播放，请不要再播放：

$(document).ready(function() {
    // Get media - with autoplay disabled (audio or video)
    var media = $('#video1, #video2, #video3, #video4, #video5');
    var tolerancePixel = 10;
    var hasPlayMap = {};
    function checkMedia(){
        // Get current browser top and bottom
        var scrollTop = $(window).scrollTop() + tolerancePixel;
        var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;

        //if ($(window).scrollTop() > $(window).height() - 100) {
        media.each(function(index, el) {
            var yTopMedia = $(this).offset().top;
            var yBottomMedia = $(this).height() + yTopMedia;

            if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
                var thisId = $(this).attr("id");
                if (hasPlayMap[thisId]){
                   return;
                }
                hasPlayMap[thisId] = true;
                $(this).get(0).play();
            } else {
                $(this).get(0).pause();
            }
        });

        //}
    }
    $(document).on('scroll', checkMedia);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:500px"></div>
<video muted id="video4" class="lightbulbs" width="100%" height="auto">
<source src="http://www.ddi.com.au/culture/img/lightbulbs.mp4" type="video/mp4">
</video>
<div style="height:500px"></div>

Answer 2

对不起，我知道这很像NewToJS在评论中的答案，可悲的是我在想同一件事。

因为这是您想要的效果，所以请不要对此打上绿色勾号，因为NewToJS首先获得了答案（当然，这是您计划的）。

您可以设置视频的onend事件以设置视频的onplay事件：

document.querySelector('video').forEach(function(element) {
    // Set the onend event to...
    element.onend = function() {
        // ...set the onplay event to...
        this.onplay = function() {
            // ...stop playing video when the video starts playing
            this.pause();
            this.currentTime = 0;
        };
    };
});

纯jQuery版本：

$('video').each(function(ix, ele) {
    ele.addEventListener('end', function() {
        this.addEventListener('play', function() {
            ele.pause();
            ele.currentTime = 0;
        });
    });
});

观看时自动播放HTML5视频

2 个答案: