m3u8网页端直播

10月 10日, 2017 (10月 10日, 2017) 互联网次访问

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效果：人间仙境蓬莱阁

这是我很早之前整理的安防视频监控知识，没有维护和更新了，现在这个网站已经转型成个人博客。需要了解安防相关知识，资料的可以去我的这个安防知识专业网站：https://ipc.name

m3u8网页端直播

评论