我有一个包含 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();
}
});
最佳答案
If ($.browser.safari) {
// hide pause button and show play button
}
注意:这是一个基于 jquery 的解决方案
关于javascript - 根据浏览器显示不同的 html 元素。 HTML5 Safari 自动播放按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20969771/