Video.js/Contrib-HLS在大多数浏览器中无法播放HLS(代码:4 MEDIA_ERR_SRC_NOT_SUPPORTED) [英] Video.js / Contrib-HLS not playing HLS in most browsers (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)
问题描述
我正在构建一个视频播放器，该视频播放器需要播放HLS实时和点播流.
I have a video player I'm building that needs to play HLS live and on-demand streams.
它似乎仅在Safari上运行良好. (减去我需要更新的自定义样式，请忽略它) 在所有其他浏览器中，我都会收到此错误:
It seems to be working fine in only Safari. (minus the custom styling which I need to update, ignore that) In all other browsers I get this error:
VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded,
either because the server or network failed or because the format is not supported.
VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded,
either because the server or network failed or because the format is not supported.
我想念什么?似乎与contrib-hls演示页面的实现非常相似，该实现在所有浏览器中都可以正常运行.
What am I missing? Seems pretty similar to the contrib-hls demo page implementation, which plays fine in all browsers.
这是仓库: https://github.com/adult-swim/成人游泳视频播放器，要查看的分支是feature-latest-versions
Here's the repo: https://github.com/adult-swim/adult-swim-video-player and the branch to look at is feature-latest-versions
为了进行测试，我实际上是使用从videojs-contrib-hls演示页面下载的视频，这里:
For testing I'm actually using a downloaded video from the videojs-contrib-hls demo page here: http://videojs.github.io/videojs-contrib-hls/
Here is where I'm where I'm initializing VideoJS: https://github.com/adult-swim/adult-swim-video-player/blob/feature-latest-versions/app/scripts/views/adult-swim-video-player.js#L56
这是代码的两个编译版本:
http://www.adultswim.com/dev/as-player/-需求
http://www.adultswim.com/dev/as-player-live/-直播
Here's two compiled versions of the code:
http://www.adultswim.com/dev/as-player/ - on demand
http://www.adultswim.com/dev/as-player-live/ - live
我正在使用以下版本:
video.js:5.5.2
videojs-contrib-hls:1.3.4
videos-contrib-media-sources:2.4.4
I'm using these versions:
video.js : 5.5.2
videojs-contrib-hls : 1.3.4
videos-contrib-media-sources : 2.4.4
推荐答案
您的MIME类型不正确:<source src="video/test.m3u8" type="video/mp4">.
You have an incorrect mime type: <source src="video/test.m3u8" type="video/mp4">.
结果是播放器将尝试播放html5技术(html5视频元素)中的视频，因为它可以播放MP4.在Safari上，视频将播放，因为video元素也支持HLS，但是在不支持本地HLS的浏览器上，视频将中断.
The result is the player will try to play the video in the html5 tech (an html5 video element) since that can play MP4. On Safari the video will play as the video element also supports HLS, but on browsers without native HLS support it will break.
使用正确的mime类型application/x-mpegURL，以便videojs-contrib-hls可以在其他浏览器上启动.
Use the correct mime type application/x-mpegURL so that videojs-contrib-hls can kick in on other browsers.
这篇关于Video.js/Contrib-HLS在大多数浏览器中无法播放HLS(代码:4 MEDIA_ERR_SRC_NOT_SUPPORTED)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
