javascript iPad 上的 HTML5 视频“黑屏”

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5077390/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 15:52:18  来源:igfitidea点击:

HTML5 Video "Black Screen" on iPad

javascriptipadhtmlhtml5-video

提问by Dan Hanly

I'm building a website that has videos embedded within them. This website needs to cater for iPad users as well but I'm having trouble with the ol' videotag at the moment. I have a video that plays fine in browsers but not on an iPad unfortunately.

我正在建立一个网站,其中嵌入了视频。该网站也需要满足 iPad 用户的需求,但我目前在使用 ol'video标签时遇到了问题。我有一个视频可以在浏览器中正常播放,但不幸的是在 iPad 上不能播放。

I'm just getting a black screen with the iPad, and no error message to speak of.

我只是在 iPad 上出现黑屏,而且没有任何错误消息可言。

Here is my code for the video:

这是我的视频代码:

<video id="movie" width="790" height="250" controls >
    <source src="anim/intro.ipad.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="anim/intro.webm" type='video/webm; codecs="vp8, vorbis"'>
    <source src="anim/intro.theora.ogv"  type='video/ogg; codecs="theora, vorbis"'>
</video>
<script>
    var v = document.getElementById("movie");
    v.onclick = function() {
        if (v.paused) {
            v.play();
        } else {
            v.pause();
        }
    };
</script>

The videos were all created following tutorials about HTML5 video. They were all encoded using preferred iPad settings on Miro Video converter.

这些视频都是按照有关 HTML5 视频的教程创建的。它们都使用 Miro Video 转换器上的首选 iPad 设置进行编码。

Just incase this matters (I'm not sure it will) I'm testing the video on an iPad simulator.

以防万一这很重要(我不确定会不会)我正在 iPad 模拟器上测试视频。

No matter what I do, I just can't get the video to play:

无论我做什么,我都无法播放视频:

on iPad Simulator

在 iPad 模拟器上

采纳答案by gnur

Are you sure you got the encoding right?
Try this to test it:

你确定你的编码正确吗?
试试这个来测试它:

<video src="anim/intro.ipad.mp4" controls>  
      Your browser does not support the video element.  
</video>  

回答by Petrogad

is your .htaccess file serving up the particular video files correctly?

您的 .htaccess 文件是否正确提供了特定的视频文件?

Ensure your server is using the correct mime-types. Firefox will not play the Ogg video if the mime-type is wrong. Place these lines in your .htaccess file to send the correct mime-types to browsers

确保您的服务器使用正确的 MIME 类型。如果 MIME 类型错误,Firefox 将不会播放 Ogg 视频。将这些行放在您的 .htaccess 文件中以将正确的 MIME 类型发送到浏览器

AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm .webm

Reference: Video for Everybody

参考: 每个人的视频

Also, are you modifying the video element by using positioning? I've found that this creates this black video screen too.

另外,您是否通过使用定位来修改视频元素?我发现这也会产生这个黑色的视频屏幕。