zoukankan      html  css  js  c++  java
  • 浏览器播放器

    页面实现 m3u8的浏览器播放器:

    法案一:

    <!DOCTYPE hmtl>
    <html>
    <head>
    <title>the5fire m3u8 test</title>
    </head>
    <body>
    <video controls autoplay >
        <source src="http://stream.gravlab.net/003119/sparse/v1d30/posts/2014/barcelona/barcelona.m3u8">
    </video>
    </body>
    </html>
    

    法案二:

    通过开源的swfobject.js以及两个flash组件:OSMF和HLSProvider
    
    <!DOCTYPE html>
    <html>
    <head>
    <title>the5fire m3u8 test</title>
    <script src="http://sss.the5fire.com/staticfile/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://www.the5fire.com/static/demos/diaosi.m3u8"),
           // url to OSMF HLS Plugin
           plugin_m3u8: "http://www.the5fire.com/static/demos/swf/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",
           // 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>
    
    flask 起一个web 服务
    

    拓展:

    开源项目的地址:
        http://osmf.org
        http://osmf.org/dev/2.0gm/StrobeMediaPlayback.html
        https://github.com/mangui/HLSprovider
    
  • 相关阅读:
    Buildroot构建指南--Overview
    监控摄像机常识:宽动态 (WDR)介绍和理解
    HM visual studio编译报错
    宽带有哪几种接入方式
    V.24 V.35 ISDN E1 POS这些常见的广域网接口
    Linux ppp 数据收发流程
    ppp协议解析二
    PPP协议解析一
    TAP/TUN(二)
    TAP/TUN浅析
  • 原文地址:https://www.cnblogs.com/shaozheng/p/12808714.html
Copyright © 2011-2022 走看看