Web端播放rtmp、flv、m3u8多种格式的视频

文章目录

  • 简介
  • 应用场景
    • 案例之播放rtmp格式视频的小Demo
    • 播放其他格式

简介

作者为工作经验未满一年的java开发人员,希望能与同为90后大家一同爬坑,共同进步,后面将在空余的时间继续分享在工作中实际遇到的技术点与问题点,同时也欢迎批评与指正,小弟在此表示衷心感谢!

应用场景

相信大家在开发过程中可能会遇到与硬件的交互,这一篇来说一说在web端如何播放rtmp、flv、m3u8等格式的视频。获取播放地址就先跳过了,无非就是从其他的接口或者对应摄像头设备对应的SDK等途径获取到,话不多说直接进入主题,我们这里要使用到的是一个非常好用前端插件video.js。

案例之播放rtmp格式视频的小Demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>videojs播放器</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <link href="https://cdn.bootcss.com/video.js/7.7.6/video-js.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/video.js/7.7.6/video.min.js"></script>
    <script src="https://cdn.bootcss.com/videojs-flash/2.2.1/videojs-flash.min.js"></script>

</head>
<body>
	<!--播放容器-->
    <video id='myvideo' width=960 height=540 class="video-js vjs-default-skin" controls></video>
    <input type="button" value="关闭播放器" id="closeBtn"/>

    <script>
    	//初始化视频播放器
        var video = videojs('myvideo',{},function () {
            this.src({
                src: "rtmp://rtmp01open.ys7.com/openlive&f01018a141094b7fa138b9d0b856507b",
                type:'rtmp/flv'
            });
            this.play();
        });

        $("#closeBtn").click(function () {
            video.dispose();
        });
    </script>
</body>
</html>

上面使用的url为萤石的URL,替换为你自己播放的rtmp格式的url即可。然而这里面还有很多更具体的配置,比如设置自动播放什么什么的,大家可以到github上去搜索一下,就可以找到videojs具体的使用方法,我这里就写了最简单的配置。

  • 小提示:
    以上的插件可以通过CDN获取到,非常好用,小伙伴们不知道的可以了解一下,以下为链接。
    https://www.bootcdn.cn/进入后直接通过输入你对应需要查找的内容,找到后通过上述代码引用js的方式进行引用即可。

播放其他格式

播放其他格式就比较简单了,就是依葫芦画瓢的了,只需要重新配置src和type即可。src对应不同格式视频的播放url,这里不同的格式需要对应不同的type,如下:

  • rtmp:type:‘rtmp/flv’
  • flv:type:‘video/x-flv’
  • m3u8:type:‘application/x-mpegURL’

如果你觉得不错麻烦点赞一下,这是最大的鼓励,下一篇可以讲讲web端的音频录制,鞠躬致谢!

你可能感兴趣的:(js插件)