Javascript HTML5视频事件可以在Safari上播放而不触发_Javascript_Safari_Html5 Video

Javascript HTML5视频事件可以在Safari上播放而不触发

javascript safari

Javascript HTML5视频事件可以在Safari上播放而不触发,javascript,safari,html5-video,Javascript,Safari,Html5 Video,我有一个包含Javascript的HTML页面，它允许在任何浏览器上使用HTTP实时流播放视频（在本例中实际上只是音频内容）。在大多数情况下，它使用hls.js，但在苹果产品的情况下，我需要做不同的事情，因为Safari有原生的hls支持全文转载如下，但重要的一行如下： else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = 'music.m3u8'; video.addEventLi

我有一个包含Javascript的HTML页面，它允许在任何浏览器上使用HTTP实时流播放视频（在本例中实际上只是音频内容）。在大多数情况下，它使用

hls.js

，但在苹果产品的情况下，我需要做不同的事情，因为Safari有原生的hls支持

全文转载如下，但重要的一行如下：

else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'music.m3u8';
    video.addEventListener('canplay', startPlaying);
    //document.addEventListener('DOMContentLoaded', startPlaying);
}

当

canplay

事件触发时，将调用

startPlaying（）

函数，这将显示一个按钮，用户可以按下该按钮开始播放视频。然而，在我朋友的iPhone8plus（iOS11.3.1）上，这不起作用：没有任何按钮是可见的。相反，如果我注释掉

video.addEventListener（）

行，并将其替换为

document.addEventListener（）

行，则一切正常：按钮可见，他可以播放流

谁能看出我做错了什么？可能是一个新手的错误，因为我对这个网页/脚本的东西不是很有经验，让我流鼻血。。。当然，我可以使用DOM加载方法，但这是不对的，我宁愿选择正确的方法

<!DOCTYPE html PUBLIC "-//Netscape Comm. Corp.//DTD HTML//EN">
<html>
<script src="hls.js/dist/hls.js"></script>

<head><meta http-equiv="content-type" content="text/html; charset=UTF-8"></head>
<body>
<video id="video"></video>
<button id="play" hidden>Loading</button>
<script>
'use strict';
var video = document.getElementById('video');
var playButton = document.getElementById('play');

function startPlaying() {
    // For mobile browsers the start of playing has to
    // be performed by a user action otherwise it will
    // be ignored
    playButton.addEventListener('click', function() {
        video.play();
        video.muted = false;
        video.volume = 1;
        playButton.innerHTML = "Playing";
    });
    playButton.hidden = false;
    playButton.innerHTML = "Ready to play";
}

if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource('music.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, startPlaying);
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'music.m3u8';
    video.addEventListener('canplay', startPlaying);
    //document.addEventListener('DOMContentLoaded', startPlaying);
}
</script>
</body>
</html>


加载
"严格使用",；
var video=document.getElementById（'video'）；
var playButton=document.getElementById（'play'）；
函数startPlaying（）{
//对于移动浏览器，游戏的开始必须
//由用户操作执行，否则将
//被忽视
playButton.addEventListener（'click'，function（）{
video.play（）；
video.muted=false；
video.volume=1；
playButton.innerHTML=“播放”；
});
playButton.hidden=false；
playButton.innerHTML=“准备好播放”；
}
如果（Hls.isSupported（））{
var hls=新的hls（）；
hls.loadSource（'music.m3u8'）；
附件媒体（视频）；
打开（hls.Events.MANIFEST_解析，开始播放）；
}
//未启用媒体源扩展（MSE）的平台不支持hls.js。
//当浏览器具有内置HLS支持（使用“canPlayType”进行检查）时，我们可以通过“src”属性直接向视频元素提供HLS清单（即.m3u8 URL）。
//这是使用普通视频元素的内置支持，而不使用hls.js。
else if（video.canPlayType（'application/vnd.apple.mpegur'））{
video.src='music.m3u8'；
video.addEventListener（'canplay'，StartPlay）；
//文档。addEventListener（'DOMContentLoaded'，startPlaying）；
}

根据中的调查，解决方法是等待事件

loadedmetadata

，因此在我的案例中，

video.addEventListener（'loadedmetadata'，startPlaying）

，因为这是Safari上从HTML5视频元素获得的最后一个事件，除非您在用户控制的白名单中。已确认这在iOS 11.3.1上有效。

可能与Urk重复。好的。Reading建议，不可能在Safari中以编程方式可靠地使用

canplay

事件，因为它需要用户进入菜单并说您的站点可以自动播放。你可以看到我为什么流鼻血了：魔鬼是一个正常人，应该知道每个浏览器这个月的表现如何！？我一定是老了…从中的调查来看，解决办法是等待事件

loadedmetadata

，因此在我的例子中

video.addEventListener（'loadedmetadata'，startPlaying）

，因为这是您将从Safari上的HTML5视频元素获得的最后一个事件，除非您在用户控制的白名单中。确认这在iOS 11.3.1上有效。你不会发疯或变老@Rob safari只是一堆垃圾。