html5 视频在通过 chrome 中的 Controller 流式传输时仅播放一次,而根本不在 ipad 中播放

标签 html google-chrome mobile-safari html5-video

我一直在尝试在我的网页中使用 html5 视频标签。我在桌面上使用 chrome,在 iPad 上使用 safari。 当我在源标记中提供实际 mp4 文件的 URL 时它工作正常,但如果我提供我的 Controller /servlet 的 URL,那么 - 在 chrome 上,视频只播放一次,之后你甚至不能使用搜索栏或点击播放按钮再次播放视频 - 在 iPad 的 Safari 中,视频根本无法加载

在我的 Controller 中,我将内容类型设置为“video/mp4”并设置内容长度属性。不知道为什么它不工作。 不过,在桌面上的 firefox 和 safari 上,一切都运行良好。

任何帮助将不胜感激。感谢期待。

代码如下:

工作:

<video controls="controls" width="700" height="390" class="myVideo">
          <source src="http://example.com/fileName.mp4" type="video/mp4"/>
          <source src="http://example.com/fileName.ogv" type="video/ogg"/>
</video>

不工作:

<video controls="controls" width="700" height="390" class="myVideo">
          <source src="http://example.com/servletName?type=mp4" type="video/mp4"/>
          <source src="http://example.com/servletName?type=ogv" type="video/ogg"/>
</video>

最佳答案

我有完全相同的问题...PHP 脚本获取文件内容并使用 header 将其发送到浏览器。

public function videos($name, $extension, $format = null) {
    $format = is_null($format) ? $extension : $format;
    $file = file_get_contents(FCPATH . APPPATH . "resources/videos/{$name}.{$extension}");
    header("Content-length: ".strlen($file));
    // header('Content-Transfer-Encoding: binary');
    header("Content-Type: video/{$format}");
    echo $file;
}

在 Firefox 和 Safari 上,视频播放效果很好。在 Chrome 上,它只播放一次,无法使用搜索栏。在 iPad 上,它根本无法播放。

更新

嘿!!!我刚刚找到了一种让它工作的方法。您必须发送“Accept-Ranges: bytes” header !!!

PHP

header("Accept-Ranges: bytes");

关于html5 视频在通过 chrome 中的 Controller 流式传输时仅播放一次,而根本不在 ipad 中播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9531174/

相关文章:

javascript - 在 Chrome 的 Javascript 中更改占位符颜色

javascript - $(window).resize() 在 safari : why it works also if scroll window (but doesn't resize)?

javascript - 您可以从 Mobile Safari 访问 iPhone 相机吗?

html - 始终在 <select> 中显示垂直滚动条

html - 如何悬停在子元素上但将背景色拉伸(stretch)到父元素?

html - 如何在<a>标签上设置背景图片?

javascript - 如何生成与值成比例的CSS颜色?

javascript - Chrome 扩展 - 在新打开的选项卡中不起作用

java - 如何保护 chromedriver 使用的端口?

ios - IOS : flex direction column overlapping elements 中的 flexbox 布局