javascript - 根据浏览器显示不同的 html 元素。 HTML5 Safari 自动播放按钮

Question

我有一个包含 HTML5 视频播放器的网站。默认情况下，视频会在每次页面加载时自动播放。我有一个显示暂停按钮的按钮，因为这是用户在视频已经播放时要做的第一件事。

但是，在 Safari 上观看视频时，视频不会自动播放 (https://stackoverflow.com/a/12496184)。所以我想知道如何在默认情况下隐藏此暂停按钮并在 Safari 中显示播放按钮。以下是我所拥有的:

function stopPlayer() {
    var mediaPlayer;

    mediaPlayer = document.getElementById('media-video');
    mediaPlayer.controls = false;   

    mediaPlayer.pause();
    mediaPlayer.currentTime = 0;

    if ( mediaPlayer.pause ) {
        $('.pause-btn').hide();
        $('.play-btn').show();
    }

}

function playPlayer() {
    var mediaPlayer;

    mediaPlayer = document.getElementById('media-video');
    mediaPlayer.controls = false;   

    mediaPlayer.play();
}

function playPause() {
    var mediaPlayer = document.getElementById('media-video');
    if (mediaPlayer.paused) {
        mediaPlayer.play(); 
        $('.pause-btn').show();
        $('.play-btn').hide();
    } else {
        mediaPlayer.pause(); 
        $('.play-btn').show();
        $('.pause-btn').hide();
    }

}

// Swap the button states around in Safari
if (navigator.userAgent.match(/AppleWebKit/) && ! navigator.userAgent.match(/Chrome/)) {

    $('.pause-btn').hide();
    $('.play-btn').show();

}

编辑:我只需要在我的代码底部添加一个准备好的文档。以下是新的固定版本:

function stopPlayer() {
    var mediaPlayer;

    mediaPlayer = document.getElementById('media-video');
    mediaPlayer.controls = false;   

    mediaPlayer.pause();
    mediaPlayer.currentTime = 0;

    if ( mediaPlayer.pause ) {
        $('.pause-btn').hide();
        $('.play-btn').show();
    }

}

function playPlayer() {
    var mediaPlayer;

    mediaPlayer = document.getElementById('media-video');
    mediaPlayer.controls = false;   

    mediaPlayer.play();
}

function playPause() {
    var mediaPlayer = document.getElementById('media-video');
    if (mediaPlayer.paused) {
        mediaPlayer.play(); 
        $('.pause-btn').show();
        $('.play-btn').hide();
    } else {
        mediaPlayer.pause(); 
        $('.play-btn').show();
        $('.pause-btn').hide();
    }

}

 // Swap the button states around in Safari, after the dom has loaded.
$( document ).ready(function() {

    if (navigator.userAgent.match(/AppleWebKit/) && ! navigator.userAgent.match(/Chrome/)) {

        $('.pause-btn').hide();
        $('.play-btn').show();

    }
});

Answer 1

If ($.browser.safari) {
    // hide pause button and show play button
}

注意:这是一个基于 jquery 的解决方案