标签:img http and 初始 pat tle play lsp flow
关于HLS,上篇咱们已经讲过,它基于http协议,内容包括两部分:m3u8描述文件,ts媒体文件。下载与安装FFmpeg
《FFmpeg官网》

配置环境变量


【使用】
在视频所在的文件夹,输入以下命令(我这里有一个123.mp4的电影):
ffmpeg -i 80s.mp4 -c:v libx264 -c:a aac -strict -2 -f hls -hls_list_size 0 -hls_time 60 output/output.m3u8

初始视频地址123.mp4
hls_time 10 表示切片视频的时长,默认为2
hls_list_size 表示 m3u8 文件记录切片的数量,默认为5.即只记录最后5条切片,设置为0表示记录所有切片
漫长的等待.......

问:浏览器怎么播放m3u8格式的视频?
答:使用safari浏览器打开就可以播放
    <!DOCTYPE hmtl>
    <html>
    <head>
    <title>the5fire m3u8 test</title>
    </head>
    <body>
    <video controls autoplay >
            <source src="http://127.0.0.1:8080/frozen/video/finish/output.m3u8">
    </video>
    </body>但是,在其他浏览器上却:

因此我们得调成使用flash播放,这里使用的是swfobject.js。《StrobeMediaPlayback.swf》
【拓展:swfobject.js】
首先,我们要为SWF资源预留一个HTML结点。这个HTML结点内的所有内容都会在客户端被Flash资源替换,当客户端没有安装Flash播放器的时候,这些内容会显示出来。这一特色在SEO以及对用户体验方面非常有必 要。
    <!DOCTYPE hmtl>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>m3u8播放器</title>
            <script type="text/javascript" src="swfobject/src/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://127.0.0.1:8080/frozen/video/finish/output.m3u8"),
                    // url to OSMF HLS Plugin         
                    //plugin_m3u8: "http://www.the5fire.com/static/demos/swf/HLSProviderOSMF.swf",
                    plugin_m3u8:"http://127.0.0.1:8080/frozen/video/finish/HLSProviderOSMF.swf"
                };
                var params = {
                    // self-explained parameters         
                    allowFullScreen: true,
                    allowScriptAccess: "always",
                    bgcolor: "#000000"
                };
                var attrs = {
                    name: "player"
                };
                swfobject.embedSWF(
                    // url to SMP player         
                    //"http://www.the5fire.com/static/demos/swf/StrobeMediaPlayback.swf",
                    "http://127.0.0.1:8080/frozen/video/finish/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>大功告成!!!!

标签:img http and 初始 pat tle play lsp flow
原文地址:https://blog.51cto.com/13479739/2494698