博主后面补充了一篇博文，具体可参考博客：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. Vivado Design Suite用户指南之约束的使用第二部分（约束方法论）

    Constraints Methodology(约束方法论) 关于约束方法论 设计约束定义了编译流程必须满足的要求,以使设计在板上起作用. 并非所有步骤都使用所有约束在编译流程中. 例如,物理约束仅在 ...

  2. pandas replace 替换功能function

    list like replace method dict like replace method regex expression import pandas as pd import numpy ...

  3. react使用apollo简单的获取列表

    react yarn add apollo-boost apollo-client react-apollo apollo-cache-inmemory apollo-link-http graphq ...

  4. [Codeforces Round #507][Codeforces 1039C/1040E. Network Safety]

    题目链接:1039C - Network Safety/1040E - Network Safety 题目大意:不得不说这场比赛的题面真的是又臭又长...... 有n个点,m条边,每个点有对应的权值c ...

  5. 5. 文件上传下载 与 db数据库

    文件上传 formidable multer npm i formidable multer 如何使用见: https://www.npmjs.com/ util.inspect 自己查 文件上传:表 ...

  6. 18、MySQL

    ++主键(primary key) 能够唯一标识表中某一行的属性或属性组++.==一个表只能有一个主键==,但可以有多个候选索引.==主键可以保证记录的唯一==和==主键域非空==,数据库管理系统对于 ...

  7. 无网络 使用pip安装mxnet

    # 在有网络的同系统机器上运行以下命令:pip download mxnet# 目前mxnet版本为1.3.0,执行后当前目录得到以下文件: # . # ├── certifi--py2.py3-no ...

  8. Winscp 密钥登录

    继前段时间,使用密钥SSH登录系统以后运维用着很爽,但是有一部分开发的同事反应使用Winscp添加私钥的时候,提示添加失败,原来Winscp使用的是putty作为SSH登录工具,而puttygen所生 ...

  9. GetAsyncKeyState（）& 0x8000

    0x8000 & GetKeyState(VK_SHIFT); 这句是判断是否有按下shift键. 关于GetAsyncKeyState与GetKeyState区别:关于GetAsyncKey ...

  10. 初识NLTK

    需要用处理英文文本,于是用到python中nltk这个包 f = open(r"D:\Postgraduate\Python\Python爬取美国商标局专利\s_exp.txt") ...