Javascript HTML5 视频事件不能在 Safari 上触发答案

【问题标题】：Javascript HTML5 video event canplay not firing on SafariJavascript HTML5 视频事件不能在 Safari 上触发
【发布时间】：2018-10-07 15:56:07
【问题描述】：

我有一个包含 Javascript 的 HTML 页面，旨在允许视频（在这种情况下实际上只是音频内容）在任何浏览器上使用 HTTP Live Streaming 播放。在大多数情况下，它使用hls.js，但对于 Apple 产品，我需要做一些不同的事情，因为 Safari 支持原生 HLS。

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

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

应该发生的是，当canplay 事件触发时，startPlaying() 函数会被调用，这会显示一个按钮，用户可以按下该按钮开始播放视频。但是，在我朋友的 iPhone 8plus (iOS 11.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>

【问题讨论】：

html5 audio - canplay event doesn't fire on Safari (Mac Desktop)的可能重复
乌尔克。发现得好。阅读this 表明不可能以编程方式在Safari 中可靠地使用canplay 事件，因为它需要用户进入菜单并说您的站点可以自动播放。你可以看到为什么我会在这里流鼻血：魔鬼是一个正常人怎么应该知道每个浏览器本月决定的行为！？我一定是老了……
根据other question 中的调查，解决方法是等待事件loadedmetadata，所以在我的情况下是video.addEventListener('loadedmetadata', startPlaying)，因为这是您要从中获得的最后一个事件Safari 上的 HTML5 视频元素，除非您在用户控制的白名单中。确认这适用于 iOS 11.3.1。
你不会发疯或变老@Rob safari 只是一块热垃圾。

标签： javascript safari html5-video

【解决方案1】：

根据other question 中的调查，解决方法是等待事件loadedmetadata，因此在我的情况下为video.addEventListener('loadedmetadata', startPlaying)，因为这是您将从HTML5 视频元素上获得的最后一个事件Safari，除非您在用户控制的白名单中。确认这适用于 iOS 11.3.1。

【讨论】：