关于视频播放器:H5播放Rtmp之videojs播放

42次阅读

共计 1977 个字符，预计需要花费 5 分钟才能阅读完成。

咱们看到了 HLS 播放视频实时性十分差，好的在 6 -7s，差点的就要 10-12s 了，也就是人走了，预计视频上还能看到，这对观感成果造成了很大的影响！然而益处就是它是基于 http 协定文件下载的，所以不须要任何插件，到处播放，处处兼容，所以 rtmp 和 hls 在 web 端的特点如下：

HLS

(1) 应用 http 协定，兼容所有浏览器。
(2) 延时十分大，不太适宜实时视频源，适宜文件点播或历史录像直播。

RTMP

(1) 应用 flash 插件播放，不兼容所有浏览器 (特地 2020 年 12 月后 chrome 带头不再反对 flash)
(2) 浏览器播放须要对浏览器平安进行设置，此外点播可能还会弹出确定提醒，交互体验较差
(3) 更贴近传统监控的实时协定，实时性十分好，根本与实时视频点播统一

思考到实时性，咱们可能还会抉择应用 rtmp 协定点播咱们的视频，所以就实时性而言还是很有必要思考 rtmp 协定的应用，接下来，我要跟大家一起分享的就是在 web 端应用 rtmp 协定查看视频。

前端播放代码如下所示：

<!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>

我应用的是 360 浏览器，测试没有提醒 flash 插件平安限度，间接播放进去。延迟时间大略在 1s 以内。

那么如何解决？咱们须要配置 chrome 容许 flash 运行，在 chrome 浏览器中输出设置地址：

chrome://settings/content/flash

浏览器凋谢 flash 之后并不是所有浏览器就能够播放了，如果是 http 的可能会提醒不平安，须要独自为该网站凋谢 flash，如下所示，点击 chrome 浏览器“不平安”提醒按钮，在菜单中关上 flash

再次刷新该网站就能够看到 rtmp 直播视频了

源码获取、单干、技术交换请获取如下联系方式：
QQ 交换群：961179337

微信账号：lixiang6153
公众号：IT 技术快餐
电子邮箱：lixx2048@163.com

正文完