m3u8网页端直播

m3u8是苹果公司开发的流媒体解决方案中的视频播放的文件,可以比较好的在手机端播放,但是电脑网页端不行,用html5 video标签也不行。据说用mediaelementjs框架可以。wordpress自带有这个视音频播放功能,测试了下不行,将mediaelementjs升级到最新版本也不行(升级方法),据说要在服务器.htaccess文件里添加注释。因为服务器不支持.htaccess,只好作罢。

# For HLS support
AddType application/x-mpegURL .m3u8
AddType vnd.apple.mpegURL .m3u8
AddType video/MP2T .ts

研究了下,找到一种常用方法,使用flash播放器播放m3u8视频。
1.使用swfobject.js文件
2.使用网页端的flash播放器-StrobeMediaPlayback.swf
3.给StrobeMediaPlayback.swf添加支持HLSm3u8 视频流的插件

完整的代码:

<!DOCTYPE html>
<html>
<head>
<title>m3u8在线直播 | 天一生水</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
</head>
<body>
<div id="player">
</div>
<script>
    var flashvars = {
        // M3U8 url, or any other url which compatible with SMP player (flv, mp4, f4m)
        // escaped it for urls with ampersands
        src: escape("http://alhlscdn.lechange.cn/LCL/2C02432PAW01541/0/0/20160922123329/dev_20160922123329_at9mpdnsahtm3csp.m3u8"),
        // url to OSMF HLS Plugin
        plugin_m3u8: "http://i.jiangyu.org/demo/live/HLSProviderOSMF.swf",
    };
    var params = {
        // self-explained parameters
        allowFullScreen: true,
        allowScriptAccess: "always",
        bgcolor: "#000000"
    };
    var attrs = {
        name: "player"
    };

    swfobject.embedSWF(
        // url to SMP player
        "http://i.jiangyu.org/demo/live/StrobeMediaPlayback.swf",
        // div id where player will be place
        "player",
        // width, height
        "800", "485",
        // minimum flash player version required
        "10.2",
        // other parameters
        null, flashvars, params, attrs
    );
</script>
</body>
</html>

demo效果:人间仙境蓬莱阁

4G网络摄像机的使用及相关知识 安全防范系统设计依据

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×