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

【问题标题】：Showing a different html element depending on browser. HTML5 Safari Autoplay button根据浏览器显示不同的 html 元素。 HTML5 Safari 自动播放按钮
【发布时间】：2014-01-07 19:22:33
【问题描述】：

我有一个包含 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();

    }
});

【问题讨论】：

标签： javascript jquery html css video

【解决方案1】：

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

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

【讨论】：

我的基于 javascript 的检测工作正常，因为我已成功使用 alert() 函数在 Safari 中为我提供结果。我想知道如何隐藏我的按钮。更多关于 .show .hide 的 jQuery 问题
不管怎样，$.browser 已经从 jQuery 中移除了
感谢@A.Wolff 的澄清
我认为问题在于您试图在实际加载按钮之前隐藏/显示按钮。尝试将您的代码包装在 jquery 就绪事件处理程序中。
@SelvarajMA 你是完全正确的。这解决了我的问题！谢谢。

【解决方案2】：

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

【讨论】：