默认情况下,m3u8文件可以在Mac Safari浏览器中播放,但无法在其他桌面浏览器中播放。要使它们在所有支持HTML5和非HTML5的浏览器中播放,需要做什么?
默认情况下,m3u8文件可以在Mac Safari浏览器中播放,但无法在其他桌面浏览器中播放。要使它们在所有支持HTML5和非HTML5的浏览器中播放,需要做什么?
不幸的是,目前HTML5对视频的支持非常分散,可以说几乎是无用的(至少作为主要关注点),M3U8播放列表是苹果HTTP Live Streaming的一部分,从名称中可以看出,它们(或者至少最初)是苹果标准,没有其他浏览器使用它们或HTTP Live Streaming。
您可以安装一些程序以添加对HLS的支持。例如,一些公司已经开发了用Flash或Silverlight编写的HLS播放器。Yospace已经为HLS播放开发了Flash SDK,其中包括JWPlayer mediaprovider,它允许您在非Flash设备上使用JW的自动HTML5回退(即:iPhone / iPad),而所有其他设备将获得JWPlayer体验。
许多公司承诺“标准化浏览器视频支持”,但他们所有的承诺(到目前为止)都未兑现,因此,无论您选择哪个选项,都会有所妥协。
微软Edge浏览器可以播放m3u8文件,但您必须拥有Windows 8或10操作系统...只需打开Microsoft Edge浏览器并输入m3u8文件的URL链接即可开始播放。
我使用了Flowplayer,它很容易设置并且能在所有浏览器上运行并且是免费的,除非你想要自己的品牌...(不像JW Player)。
下载Flowplayer请点击这里
我通过跟随此演示成功地设置了HLS播放。
请点击HLS演示
需要注意的一件事情是,演示中没有提到:
以下是我的工作页面,例如运行HLS:
<!DOCTYPE html>
<html>
<head>
<title>Player</title>
<link rel="stylesheet" href="/client/static/flowplayer-6.0.5/skin/functional.css">
<script src="/client/static/flowplayer-6.0.5/jquery-1.12.4.min.js"></script>
<script src="/client/static/flowplayer-6.0.5/flowplayer.min.js"></script>
<script src="/client/static/flowplayer-6.0.5/flowplayer.hlsjs.min.js"></script>
</head>
<body>
<div>
<h3>Sample Video</h3>
</div>
<div id="player">
<div data-live="false" data-ratio="0.5625" class="flowplayer fixed-controls" data-volume="0" style="max-width: 800px; max-height: 450px;">
<video data-title="Sample Video">
<source type="application/x-mpegurl" src="http://:8000/video_cache/d_stream_f7ccc24921ca6123d80d7d1a1a4bfaa1/stream_f7ccc24921ca6123d80d7d1a1a4bfaa1.m3u8">
</video>
</div>
<p hidden id="vid">f7ccc24921ca6123d80d7d1a1a4bfaa1</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Your title</title>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto" data-setup='{}'>
<source src="https://aznbkcstreamer-ukso1.streaming.media.azure.net/c1b3bdd8-2486-4300-89f3-3e4e9eacb57d/GWMAWARDS.ism/manifest(format=m3u8-aapl)" type="application/x-mpegURL">
</video>
<script>
var player = videojs('my_video_1');
player.play();
</script>
</body>
</html
尝试一下,使用您的播放列表/视频链接。只需更改src链接即可。
我不太明白.m3u8播放列表的情况...但我并不特别喜欢它们...话虽如此,this似乎认为它可以满足你的需求...github/etianen/html5media
你所要做的就是在你的 HTML 文档的 中嵌入一段 JavaScript 代码,接着一些神奇的事情会自动发生,或者也可能没有任何神奇...HTML5视频和音频标签使将媒体嵌入文档变得像嵌入图像一样容易。只需要一个单独的
<script src="/path/to/your/html5media.min.js"></script>
我能够通过本地的HTML5嵌入方式,在桌面浏览器中播放从Wowza服务器流式传输的.m3u8电影,例如...
<video src="video.mp4" width="320" height="240" controls preload></video>
然而,我尚未能够通过本地HTML控件使它们进入“全屏”模式...但我正在研究中。
m3u8
播放列表文件是由 Nullsoft 团队为 Winamp 音乐播放器创建的播放列表文件。有两个挑战:1)文件路径可以是客户端机器上本地存在的绝对文件,2)也可以是指向远程文件的绝对 URL 链接。如何知道播放列表中包含的文件来自本地文件? - Buhake Sindi