可见性恢复为“可见”：仅在之前不暂停的情况下自动播放视频

Question

I can pause a video when visibity is changed to hidden, and play the video when visibility is back to visible. Like that :

    var userManuallyPause = false;

    var video = document.getElementById('video');
    var documentTitle = document.title;

    var updateTitleForVideo = function(state){
        if (state === '') {
            document.title = documentTitle;
            return;
        };

        document.title = documentTitle + ' [' + state + ']';
    };

    video.onpause = function(){
        userManuallyPause = true;
        updateTitleForVideo('Paused');
    };

    video.onplay = function(){
        updateTitleForVideo('');
    };

    document.addEventListener('visibilitychange', function(){
        var state = document.visibilityState;

        if (!video.paused) {
            if (state === 'hidden') {
                video.pause();
                userManuallyPause = false;
                updateTitleForVideo('Paused');
            }
        }
        else if (state === 'visible' && !userManuallyPause) { video.play(); }
    });

But if the video is already on pause before visibility goes to hidden, I don't want the video to play when I go back to visible.

Is that possible ? I'm not sure.

Answer 1

You can store it in a variable such as var userManuallyPause = false , and if the user pauses it him/herself, you can set that variable to true. When the user unpauses, you can set it back to false.

Then in your code above, you add a check of

if (!userManuallyPause) { ... }

and it should run as expected.