博主后面补充了一篇博文，具体可参考博客：https://www.cnblogs.com/FHC1994/p/11724484.html

------------------------------------------------------------------------------------------------------------------------------------
前言：刚接触前端，小白一个，如有出错，请指正，谢谢！

注：视频格式可以分为适合本地播放的本地影像视频和适合在网络中播放的网络流媒体影像视频两大类。

一、互联网网络流媒体简介

　　HTTP stream是各家自己定义的http流，应用于国内点播视频网站。

　　HLS是苹果公司实现的基于 HTTP 的流媒体传输协议，全称 HTTP Live Streaming，可支持流媒体的直播和点播，主要应用在 iOS 系统，为 iOS 设备（如 iPhone、iPad）提供音视频直播和点播方案。

　　RTMP是实时消息传输协议，Real Time Messaging Protocol，是 Adobe Systems 公司为 Flash 播放器和服务器之间音频、视频和数据传输开发的开放协议。协议基于 TCP，是一个协议族，包括 RTMP 基本协议及 RTMPT/RTMPS/RTMPE 等多种变种。RTMP 是一种设计用来进行实时数据通信的网络协议，主要用来在 Flash/AIR 平台和支持RTMP协议的流媒体/交互服务器之间进行音视频和数据通信。

　　HTTP用于点播，本质上还是文件分发，实时性差。

　　HLS支持点播和直播 ，HLS的延迟在10秒以上。

　　RTMP本质上是流协议，主要的优势是：实时性高(实时性一般在3秒之内)、稳定性高。主要用于直播应用，对实时性有一定要求。

　　RTMP协议一般传输的是flv，f4v格式流，RTSP协议一般传输的是ts,mp4格式的流。HTTP没有特定的流。

补注：（可用的直播源地址，于2018年11月21日经测试可用）

　　HLS直播源地址：

　　　　CCTV1高清：http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8

　　　　CCTV3高清：http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8

　　　　CCTV6高清：http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8

　　RTMP直播源地址：

　　　　香港卫视：rtmp://live.hkstv.hk.lxdns.com/live/hks1

　　　　　　　　　rtmp://live.hkstv.hk.lxdns.com/live/hks2

　　　  湖南卫视：rtmp://58.200.131.2:1935/livetv/hunantv

　　　　美国1：rtmp://ns8.indexforce.com/home/mystream

　　　　美国中文电视：rtmp://media3.sinovision.net:1935/live/livestream

　　　　香港财经：rtmp://202.69.69.180:443/webcast/bshdlive-pc

　　　　韩国GoodTV：rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp

二、示例

环境：videojs7.3.0+chrome浏览器

1.HLS测试代码如下：

<!DOCTYPE html>

<html>

    <head>

        <title>播放器</title>

        <!-- 导入的videojs是7.0版本以上的，集成VHS协议库，可播放HLS流媒体视频 -->

        <link href="videolib/css/video-js.min.css" rel="stylesheet" type="text/css">

        <script src="videolib/js/video.min.js"></script>

    </head>

    <body>

        <video id='myvideo' width=960 height=540 class="video-js vjs-default-skin" controls>

            <!-- hls直播源地址：CCTV1高清 -->

            <source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8">

        </video>

        <script>

            var player = videojs('myvideo', {}, function(){console.log('videojs播放器初始化成功')})

            player.play();

        </script>

    </body>

</html>

运行结果：

注：效果感觉不好，不稳定，延时时间很长

2.RTMP测试代码如下：

<!DOCTYPE html>

<html>

    <head>

        <title>播放器</title>

        <!-- 导入的videojs是7.0版本以上的，集成VHS协议库，可播放HLS流媒体视频 -->

        <link href="videolib/css/video-js.min.css" rel="stylesheet" type="text/css">

        <script src="videolib/js/video.min.js"></script>

        <!-- 引入的videojs-flash.js插件主要是为播放rtmp视频流-->

        <script src="videolib/videojs-flash.min.js"></script>

    </head>

    <body>

        <video id='myvideo' width=960 height=540 class="video-js vjs-default-skin" controls>

            <!-- RTMP直播源地址-->

            <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks1">

        </video>

        <script>

            var player = videojs('myvideo', {}, function(){console.log('videojs播放器初始化成功')})

            player.play();

        </script>

    </body>

</html>

运行结果：

注：有一个错误，但是不影响运行，查了一下，说是因为上面代码src缺少http://，所以在chrome浏览器中会出现Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME的问题。

效果：实时性很好，直接运行就可以打开直播源视频了。

三、一些补充说明

1.对于Video.js 5.x及更低版本，Flash技术是Video.js核心存储库的一部分。对于Video.js 6.x及更高版本，Flash技术位于单独的存储库中。videojs-flash.js插件只与Video.js> = 6.0.0一起使用，因为之前的flash技术已构建到版本中！ video.js不能直接播放rtmp流，需要videojs-flash.js 这个插件。

2.对于播放HLS视频，在videojs7版本之前要引用videojs-contrib-hls.js插件才能播放。videojs7版本之后的，Video.js默认捆绑VHS（VHS是videojs-contrib-hls的继承者。它是一个源自videojs-contrib-hls存储库的源处理程序。虽然videojs-contrib-hls最初设计用于在所有浏览器上添加HLS播放，但我们意识到引擎也可以播放其他格式，所以videojs-contrib-hls这个项目已经被弃用，被videojs-http-streaming继承）。默认情况下，在Video.js 7及以上版本中已经集成Videojs HTTP Streaming（昵称为VHS），不必使用videojs-http-streaming插件就可以播放HLS，DASH和未来的HTTP流媒体协议视频。

注意：

1.对于Video.js 7之前的版本（明确说是6版本的），必须使用videojs-http-streaming.js插件才可以播放HLS，DASH和未来的HTTP流媒体协议视频，即使它们不是本机支持的。

2.VHS支持HLS和DASH和未来的HTTP流媒体协议。

参考网址：

https://blog.videojs.com/introducing-video-js-http-streaming-vhs/

https://www.cnblogs.com/samirchen/p/7066116.html

https://www.cnblogs.com/lidabo/p/7279817.html

再次补充：以上测试是在Hbuilderx环境下实现的，但是换到vscode编辑器运行rtmp流就无法播放！最后发现好像是因为Hbuilderx自带服务器环境，而vscode没有，所以会出现这种情况。

----因为看到评论很多人都在索要videojs、videojs-flash.min.js和video-js.min.css文件，所以我又把之前埋没很久的文件拉出来给大家放到云盘上了，大家可以免费下载！----

链接：https://pan.baidu.com/s/1MC1c_P9j7suNbmw5bBNupg
提取码：81zh

videojs+hls+rtmp流媒体播放的更多相关文章

  1. EasyDSS RTMP流媒体服务器中调用videojs播放rtmp视频显示在左上角问题

    本文转自EasyDarwin团队成员Penggy的博客:http://www.jianshu.com/p/f63f5b7c691b 问题描述: 近期我开发了一款新一代的RTMP/HLS流媒体服务器软件 ...

  2. RTSP/RTMP/HLS/HTTP流媒体播放器EasyPlayer

    EasyPlayer播放器系列项目 EasyPlayer是由EasyDarwin开源团队开发和维护的一个流媒体播放器系列项目,随着多年不断的发展和迭代,不断基于成功的实践经验,发展出包括有: Easy ...

  3. EasyNVR网页/微信播放RTSP摄像机HLS/RTMP播放时出现起播等待问题的优化过程

    EasyNVR 项目中, 我们需要在网页/微信中嵌入 HLS 播放器, 实现直播效果. 开发过程中, 我们调研了很多HLS播放器, 包括 百度cyberplayer, ckplayer, flowpl ...

  4. 转: 视频相关的协议族介绍(rtsp, hls, rtmp)

    转自: http://www.zhihu.com/question/20621558   作者:杨华链接:http://www.zhihu.com/question/20621558/answer/1 ...

  5. HTTP/HLS/RTMP超级负载测试工具

    这个负载测试工具是网游分享的工具,可以在http://blog.csdn.net/win_lin/article/details/11835011 或者https://github.com/winli ...

  6. HTTP/HLS/RTMP超级负载测试工具(转)

    这个负载测试工具是网游分享的工具,可以在http://blog.csdn.net/win_lin/article/details/11835011 或者https://github.com/winli ...

  7. EasyNVR无插件播放HLS/RTMP网页直播方案前端完善：监听表单变动

    在上一篇博客中我们表述完了防止提交成功后多余操作提交的一个过程:其中的精髓在于ajax的触发事件的使用. 而这篇博客主要想说明一下如何实时的判断出表单是否发生变化. 问题表述: 在网页前端的开发过程中 ...

  8. RTMP流媒体播放过程

      RTMP协议规定:第一步,建立一个网络连接(NetConnection):客户端和服务端的基础连通关系 第二步:建立一个网络流(NetStream)发送多媒体的通道(只能建立一个网络连接,可以建立 ...

  9. RTMP流媒体播放过程（转）

    本文描述了从打开一个RTMP流媒体到视音频数据开始播放的全过程. 注意:RTMP中的逻辑结构 RTMP协议规定,播放一个流媒体有两个前提步骤:第一步,建立一个网络连接(NetConnection):第 ...

随机推荐

  1. MySQL命令学习

    上面两篇博客讲了MySQL的安装.登录,密码重置,为接下来的MySQL命令学习做好了准备,现在开启MySQL命令学习之旅吧. 首先打开CMD,输入命令:mysql -u root -p  登录MySQ ...

  2. Kafka 2.1.0压缩算法性能测试

    Apache Kafka 2.1.0正式支持ZStandard —— ZStandard是Facebook开源的压缩算法,旨在提供超高的压缩比(compression ratio),具体细节参见htt ...

  3. AS 常用快捷键

    上篇中我们讲了Android Studio如何添加插件,这篇我们讲讲AS的快捷键,这里我说明的快捷键都是最最实用的,希望刚刚加入AS的朋友尽快的熟悉一下这几个快捷键,这样可以帮助你提高coding的效 ...

  4. 【转载】C++中替代sprintf的std::ostringstream输出流详解

    一.简单介绍 ostringstream是C++的一个字符集操作模板类,定义在sstream.h头文件中.ostringstream类通常用于执行C风格的串流的输出操作,格式化字符串,避免申请大量的缓 ...

  5. Ext JS 6 入门学习资料大全(2018-03-07)

    现在 sencha touch已经升级为 Ext JS 6 了重新整理下资料 官方网站:https://www.sencha.com/ 在线文档:http://docs.sencha.com/extj ...

  6. zhenya moves from parents

    Zhenya moved from his parents' home to study in other city. He didn't take any cash with him, he onl ...

  7. a排兵布阵

    来源hdu1166 C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵 ...

  8. 求问ps如何导出单个切片及PS导出所有的切片图像

    在ps里面对图片进行切片,并根据需要弄好切片,利用shift键,可以选择其中部分的切片: 弄好以后,点击“文件”,选择“存储为WEB和设备所用格式”:. 在打开的“存储为WEB和设备所用格式”界面上点 ...

  9. Spring Security的核心拦截器

    1. HttpSessionContextIntegrationFilter 位于过滤器顶端,第一个起作用的过滤器. 用途一,在执行其他过滤器之前,率先判断用户的session中是否已经存在一个Sec ...

  10. 大臣的旅费---树的直径（dfs）

    很久以前,T王国空前繁荣.为了更好地管理国家,王国修建了大量的快速路,用于连接首都和王国内的各大城市. 为节省经费,T国的大臣们经过思考,制定了一套优秀的修建方案,使得任何一个大城市都能从首都直接或者 ...