iOS上未触发HTML5视频事件

时间:2013-11-27 21:09:09

标签: javascript ios youtube-api html5-video youtube-javascript-api

我在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'>

1 个答案:

答案 0 :(得分:0)

不确定你是如何在桌面Safari中使用它的 - 也不应该触发alert事件处理程序中的loadstart函数,因为浏览器应该抛出一个安全错误当您尝试访问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调用中使用自动启动播放器变量) - iOS不允许编程播放媒体,但在所有情况下都需要用户干预。