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的解决方案

Answer 2

我的问题是我在装载之前试图操纵dom。我已将我的固定代码添加到原始答案中。非常感谢@SelvarajMA指出这一点。

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

2 个答案: