jwplayer android m3u8,javascript - JW Player can not play m3u8 stream? - Stack Overflow

Perhaps it's a missing !DOCTYPE declaration that you don't have.

I don't have ability to test this personally, but try this version that also includes other fixes based on the original file.

Provider tests

/*

body { padding: 50px; font: 13px/20px Arial; background: #EEE; }

form { margin-top: 20px; }

#player { -webkit-box-shadow: 0 0 5px #999; background: #000; }

ul { margin-top: 40px; padding: 0 0 0 20px; list-style-type: square; }

/*]]>*/

Test M3U8

You need Flash to play these tests

//

jwplayer("player").setup({

file: '../m3u8/index.m3u8',

flashplayer: 'player.swf',

provider:'adaptiveProvider.swf',

height: 360,

width: 640

});

function loadStream(url) {

jwplayer("player").load({file: url,provider: 'adaptiveProvider.swf'});

jwplayer("player").play();

return false;

}

//]]>

//

$(document).ready(function() {

loadStream('http://localhost/m3u8/index.m3u8');

});

//]]>

EDIT: Note that you will have to be on the same Domain for this to work. Also, jwPlayer forum mentions that .m3u8 works only for iOS and Safari. Reference HERE.

To test a valid .m3u8 streaming playback webpage provided by LongTail Video website with your device, access this WEBPAGE. Caution when using desktop browser! It or VLC Media Player Plugin might crash with a sad face.

### 回答1: HTML5支持播放m3u8直播流,实现方法如下: 通过HTML5 video标签实现 通过 video标签来实现 m3u8 码流的播放。示例代码: ``` <video id="video" src="http://example.com/live/index.m3u8" autoplay controls></video> ``` 其中,id为video,src为m3u8直播流地址,控制控件为controls,autoplay为自动播放。 通过HLS.js实现 HLS.js 是一个 JavaScript 中的 HTTP Live Streaming 客户端。通过此插件可以很简单地完成直播流的播放及控制。示例代码: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HLS.js demo</title> <script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script> </head> <body> <video id="video" width="640" height="360"></video> <script> if(Hls.isSupported()) { var video = document.getElementById('video'); var hls = new Hls(); var url = 'http://example.com/live/index.m3u8'; hls.attachMedia(video); hls.on(Hls.Events.MEDIA_ATTACHED, function () { hls.loadSource(url); hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) { video.play(); }); }); } </script> </body> </html> ``` 使用HLS.js时需先引入它的支持库,然后创建一个 video标签,通过hls.attachMedia(video)与 hls.loadSource(url)实现直播流的播放。 总之,HTML5提供了多种方式播放m3u8直播流,只需更改代码或引入相关插件即可。 ### 回答2: HTML播放M3U8直播流的方法是使用video标签和HLS(HTTP Live Streaming)技术。M3U8是一种用于指定多个音视频片段的播放列表文件格式,而HLS是以M3U8为基础,通过拆分音视频流为小片段,并基于HTTP协议进行分段传输的一种流媒体协议。 要在HTML中播放M3U8直播流,我们可以在video标签中设置src属性为M3U8文件的URL地址。例如: <video src="http://example.com/live.m3u8"></video> 当在HTML中加载这个video标签后,HTML5会自动识别并尝试使用HLS来解析播放M3U8直播流。如果浏览器支持HLS,那么M3U8直播流将会被播放;如果不支持,则需要提供备用播放器。 值得注意的是,HLS仅在部分浏览器和设备上获得广泛支持。在移动设备(如iOS和Android)上,大部分浏览器都原生支持HLS;而在桌面浏览器上,则主要依赖于是否安装了支持HLS的插件或使用了基于HLS的开源播放器(如Video.js、JWPlayer等)。 此外,使用M3U8直播流时需要注意网络传输速度的稳定性,以确保流畅播放。因为HLS会将音视频流分为多个小片段进行传输,如果网络不稳定,可能会导致播放卡顿、延迟或者无法播放。 总之,使用HTML播放M3U8直播流,只需在video标签中设置M3U8文件的URL地址即可,然后浏览器会自动解析并播放该直播流,前提是浏览器支持HLS技术。 ### 回答3: 要在HTML中播放m3u8直播流,可以使用Video标签和一些JavaScript代码来实现。 首先,在HTML文件中,可以添加一个Video标签来创建视频播放器。像这样: ```html <video id="myVideo" controls></video> ``` 其中,`id`属性可以用来在JavaScript代码中引用该视频元素。`controls`属性可以添加播放控件,例如播放/暂停按钮和进度条。 然后,在JavaScript中,可以通过获取Video元素的引用,为其设置视频源地址并播放。像这样: ```javascript var video = document.getElementById("myVideo"); video.src = "直播流的m3u8地址"; video.play(); ``` 在这段代码中,通过`getElementById()`方法获取了Video元素的引用,然后使用`src`属性设置了m3u8直播流的地址,最后使用`play()`方法开始播放视频。 需要注意的是,m3u8格式的直播流可能需要一些额外的技术支持,例如HLS(HTTP Live Streaming)协议的支持。一些浏览器可能不支持播放m3u8直播流,因此在不同的设备和浏览器上测试播放功能是很重要的。 此外,还可以通过JavaScript代码来监听视频播放状态,例如视频播放完成或播放错误等。可以使用`onended`和`onerror`事件来监听这些状态。 希望以上的回答能够帮助你在HTML中播放m3u8直播流。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值