Видео-событие Javascript HTML5 может не запускаться в Safari - PullRequest
Новая
       7

Видео-событие Javascript HTML5 может не запускаться в Safari

0 голосов
/ 26 апреля 2018

У меня есть HTML-страница, включающая Javascript, которая предназначена для воспроизведения видео (в данном случае фактически только аудиоконтента) с использованием 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>

1 Ответ

0 голосов
/ 30 апреля 2018

Из исследований по другому вопросу , обходной путь должен ждать события loadedmetadata, поэтому в моем случае video.addEventListener('loadedmetadata', startPlaying), так как это последнее событие, которое вы собираетесь получить от элемент HTML5-видео в Safari, если вы не находитесь в контролируемом пользователем белом списке Подтвердил, что это работает на iOS 11.3.1.

...