博主后面补充了一篇博文，具体可参考博客：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. 【中间件安全】Jboss安全加固规范

    1. 适用情况 适用于使用Jboss进行部署的Web网站. 适用版本:5.x版本的Jboss服务器 2. 技能要求 熟悉Jboss安装配置,能够Jboss进行部署,并能针对站点使用Jboss进行安全加 ...

  2. python 多文件知识

    对于一个大型的项目,会存在很多个py文件,本文记录与多文件有关的内容. 1. python 如何在一个.py文件中调用另一个.py文件的类 如果是在同一个 module中(也就是同一个py 文件里), ...

  3. java.lang.Exception: No tests found matching [{ExactMatcher:fDisplayName=test]解决办法

    在进行简单的Junit单元测试时,测试一直报错: 先来看一下我的单元测试类: import org.junit.Test; import org.junit.runner.RunWith; impor ...

  4. swust oj 962

    括号匹配问题 1000(ms) 65535(kb) 3045 / 13375 假设表达式中允许包含两种括号:圆括号和方括号.编写一个算法判断表达式中的括号是否正确配对. 输入 由括号构成的字符串,包含 ...

  5. Unity 为队伍设置不同颜色的shader

    在魔兽争霸等一些游戏中,我们通过模型的颜色就能很轻松的区分队伍,如下:   实现的方法有很多,比如: 1,为不同队伍各出一张不同颜色的贴图(Hmmm,war3有的地图可以容纳12只队伍,美术大大们会很 ...

  6. windows下怎样测试oracle安装是否成功以及在oracle中创建用户并赋予用户权限；和[Err] ORA-65096: 公用用户名或角色名无效的解决方案

    测试oracle数据安装是否成功,可按顺序执行以下两个步骤: 测试步骤 1:请执行操作系统级的命令:tnsping orcl 上述命令假定全局数据库名是 orcl.以下是命令执行后的示例(请在cmd命 ...

  7. PHP（方法 函数 循环 和 数组 查找）

    循环 和 数组 查找 顺序查找 二分法查找 冒泡排序 方法 函数 定义:一堆代码的集合叫做函数(满足条件下“一堆”) 语法,定义,调用,参数列表(形参,实参),返回值 两种方法: function 方 ...

  8. js的运用1

    1.parselnt() 2.parsefloat() 遇到第一个字节是非数字就结束了. 3.      var   a="hello world" a这个变量是字符串了,对于里面 ...

  9. 浅谈提高Django性能

    Django性能优化是一件困难的事情,但是也不常常如此: 下面4步将能够轻松的提高你的网站的性能,它们非常简单你应该将它们 作为标配. 持久化数据库连接 django1.6以后已经内置了数据库持久化连 ...

  10. python文件派生

    import time class Foo: x = 1 def __init__(self, y): self.y = y def __getattr__(self, item): # 没有的情况下 ...