问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

chrome不支持Flash后，网页要怎么播放视频流rtmp等格式

头像
小浣熊
    3111
    新手上路，请多包涵

    播放rtmp需要使用flash,videojs 6.0版本以上的需要引入videojs-flash，但是chrome不支持flash了，请问有什么比较好的解决办法，能够在网页上播放rtmp格式的视频吗？

    前端rtmp
    阅读 14.3k
    3 个回答
    得票最新
    头像
    然后去远足
      42.9k103763

      你是给客户用的那种私有化部署方案、还是给广大用户用的？

      私有化部署的，你说用啥就用啥呗，给客户装低版本、或是 VLC 插件、甚至用 IE 就好了。

      让所有用户都能用的，只有放弃 RTMP 这一条路。网上你能找到的一些所谓方案（比如 https://www.linkingvision.cn/... 这种），本质上都是对 RTMP 在后台转码、传输给前端时已经是 Web 所支持的格式了。花钱买它这服务转码、就不如自己搞了。

      头像
      AIger
        933
        <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>video.js播放rtmp流</title>
        <!--引入播放器样式-->
        <link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
        <!--引入播放器js-->
        <script src="http://vjs.zencdn.net/5.19/video.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
    </head>
    <body>
        <!--vjs-big-play-centered 播放按钮居中-->
        <!--poster默认的显示界面，就是还没点播放，给你显示的界面-->
        <!--controls 规定浏览器应该为视频提供播放控件-->
        <!--preload="auto" 是否提前加载-->
        <!--autoplay 自动播放-->
        <!--loop=true 自动循环-->
        <!--data-setup='{"example_option":true}' 可以把一些属性写到这个里面来，如data-setup={"autoplay":true}-->
        <video id="my-player"
            class="video-js vjs-default-skin vjs-big-play-centered" controls
            preload="auto" autoplay="autoplay"
            poster="images/logo.png" width="500" height="400"
            data-setup='{}'>
            <!--src: 规定媒体文件的 URL  type:规定媒体资源的类型-->
            <source src='rtmp://192.168.12.187:1935/live/1' type='rtmp/flv' />
        </video>
        <script type="text/javascript">
            // 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
            videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';
              //my-player为页面video元素的id
            var player = videojs('my-player'); 
              //播放
            player.play(); 
            //    1. 播放   player.play()
            //    2. 停止   player.pause()
            //    3. 暂停   player.pause()
        </script>
    </body>
</html>
        头像
        李不白
          496

          楼主如果要求不高可以试试先转码再转流，Streamedian公司的免插件播放器Html5 RTSP Player，需要架设一个Web Socket的视频流转发服务器，前端连接到此服务器后，服务端不断把RTSP视频流通过Web Socket不断转发给前端的JS处理库，JS处理库再把视频流转换为Video所支持的MP4后播放。缺点是不支持IE，延迟很严重，CPU占用高，播放时花屏、卡顿现象，体验比较差，商用估计是不行的。
          而目前成熟度最高的猿大师中间件是独立于浏览器的外接系统，兼容主流浏览器，包含低版本的Chrome和IE，不需要转码转流，直接读取RTSP视频流，能做到延迟500毫秒以内，还可以实现多路RTSP同时播放，实施成本也非常低！

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题