HTML5 视频：canPlayType() 在 Safari 中不起作用答案

【问题标题】：HTML5 Video: canPlayType() is not working in safariHTML5 视频：canPlayType() 在 Safari 中不起作用
【发布时间】：2015-02-20 09:16:51
【问题描述】：

我尝试了以下在 developer.apple.com 上编写的代码，但它抛出错误：

TypeError: 'undefined' 不是函数（评估 'myVideo.canPlayType(myTypes[i])'）

<!doctype html>
<html>
<head>
    <title>JavaScript Fallback</title>
    <script type="text/javascript">
        function checkPlaylist() {
            var playAny = 0;
            myTypes = new Array ("video/mp4","video/ogg","video/divx");
            var nonePlayable = "Your browser cannot play these movie types."
            var myVideo = document.getElementsByTagName('video')[0];
            for (var i = 0, len = myTypes.length; i < len; x++) {
               var canPlay = myVideo.canPlayType(myTypes[i]);
                if ((canPlay == "maybe") || (canPlay == "probably"))
                    playAny = 1;
            }
            if (playAny == 0)
                document.getElementById("video-player").innerHTML = nonePlayable;
         }
    </script>
</head>
<body onload="checkPlaylist()" >
    <div id="video-player" align=center>
        <video controls height="200" width="400">
            <source src="myMovie.m4v" type="video/mp4">
            <source src="myMovie.oga" type="video/ogg">
            <source src="myMovie.dvx" type="video/divx">
        </video>
    </div>
</body>
</html>

【问题讨论】：

请看看这个网站webdesign.about.com/od/video/a/html5-video-formats.htm

标签： javascript html safari html5-video

【解决方案1】：

您使用的是 Windows 版 Safari 吗？如果是这样，那可能会失败。 Apple 不再支持 Windows 版 Safari。

你也有var i = 0, len = myTypes.length; i < len; x++。最后一个x 应该是i。

【讨论】：

【解决方案2】：

使用以下脚本在 Safari 浏览器中检查您的 myTypes 数组参数：

<!DOCTYPE html> 
<html> 
<body> 

<p>Can my browser play DIVX videos? <span>
<button onclick="supportType(event,'video/divx','H.264')" type="button">Test</button>
</span></p>

<p>Can my browser play MP4 videos? <span>
<button onclick="supportType(event,'video/mp4','avc1.42E01E, mp4a.40.2')" type="button">Test</button>
</span></p>

<p>Can my browser play OGG videos? <span>
<button onclick="supportType(event,'video/ogg','theora, vorbis')" type="button">Test</button>
</span></p>

<script> 
function supportType(e,vidType,codType) { 
    var vid = document.createElement('video');
    isSupp = vid.canPlayType(vidType+';codecs="'+codType+'"');
    if (isSupp == "") {
        isSupp = "No";
    }
    e.target.parentNode.innerHTML = "Answer: " + isSupp;
} 
</script> 

</body> 
</html>

【讨论】：