iOS上未触发HTML5视频事件

HTML5 video events not triggered on iOS

本文关键字：HTML5 视频 事件 iOS      更新时间：2023-11-25

我在iOS中使用YouTube iframe API，我想在视频开始时得到通知，这是我的js代码，它在桌面旅行中很好用，但在iOS 中不好用

<html>
<body style='margin:0px;padding:0px;'>
<script type='text/javascript' src='http://www.youtube.com/iframe_api'></script>
<script type='text/javascript'>
    var ytplayer;
    function getVideoElement() {
        var iframe = document.getElementById('playerId');
        var frameDoc = iframe.contentDocument || iframe.contentWindow.document;
        var vlist = frameDoc.getElementsByTagName('video');
        return vlist[0];
    }
    function onYouTubeIframeAPIReady() {
        ytplayer = new YT.Player('playerId', {
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        })
    }
    function onPlayerReady(a) {
        var v = getVideoElement();
        v.addEventListener('loadstart', function () {
            alert('play');
        }, false);
        a.target.playVideo();
    }
    function onPlayerStateChange(a) {
        return;
    }
</script>
<iframe id='playerId' type='text/html' width='320' height='240' src='http://www.youtube.com/embed/Ou6_MkIvKOo?enablejsapi=1&rel=1&egm=1&playsinline=1&autoplay=1&showinfo=0' frameborder='0'>

也不确定如何在桌面Safari中实现这一点——loadstart事件处理程序中的alert函数永远不应该被触发，因为当您试图访问iFrame的contentDocument属性时，浏览器应该抛出安全错误（只有当父级和iFrame的源位于同一域时才允许）。iOS Safari很可能遵守了安全规范，不允许您检查不同域中iframe源的内容。

在任何情况下，用于在视频即将播放时获得通知的API方法是使用所提供的onStateChange回调。YouTube播放器表示，最接近HTML5视频的loadstart将是缓冲（当它开始加载视频时）或提示。。。所以这个函数可以是这样的：

function onPlayerStateChange(a) {
        if (a.data==YT.PlayerState.BUFFERING) { // or YT.PlayerState.CUED
          alert('play');
        }
    }

当然，所有这些都是没有意义的，因为在iOS上，你不能自动启动视频（iframe嵌入上的参数或API调用中的autostart playerVar）——iOS不允许媒体的编程播放，而是在所有情况下都需要用户干预。

相关文章：