HLS播放：html5下用video标签来播放m3u8格式的视频
<video class="tvhou" width="100%" height="100%"
controls="controls" autoplay="autoplay"
x-webkit-airplay="true" x5-video-player-fullscreen="true"
preload="auto" playsinline="true" webkit-playsinline
x5-video-player-typ="h5">
<source type="application/x-mpegURL" src="http://www.tvhou.com/zqlive/game.m3u8">
</video>
注：主要应用于手机端。
HLS协议规定：
- 视频的封装格式是TS。
- 视频的编码格式为H264,音频编码格式为MP3、AAC或者AC-3。
- 除了TS视频文件本身，还定义了用来控制播放的m3u8文件（文本文件）。
为什么苹果要提出HLS这个协议，其实他的主要是为了解决RTMP协议存在的一些问题。比如RTMP协议不使用标准的HTTP接口传输数据，所以在一些特殊的网络环境下可能被防火墙屏蔽掉。但是HLS由于使用的HTTP协议传输数据，不会遇到被防火墙屏蔽的情况（该不会有防火墙连80接口都不放过吧）。
我的其他原创文章：
HLS播放：html5下用video标签来播放m3u8格式的视频&lt;video class="tvhou" width="100%" height="100%" controls="controls" autoplay="autoplay" x-webkit-airplay="true" x5-video-player-fullscreen="
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<video id="video"></video>
<script>
if(Hls.isSuppo
在H5新标签video诞生之前，基本上所有直播都是用flash实现的。常用的流媒体协议主要有 HTTP 渐进下载和基于 RTSP/RTP 的实时流媒体协议，这两种协议是完全不同的实现方式。主要区别如下：
1. 一种是分段渐近下载，一种是基于实时流来实现播放
2.协议不同，HTTP 协议的渐近下载意味着你可以在一台普通的 HTTP 的应用服务器上就可以直接提供点播和直播服务
3.延迟...
<meta charset="UTF-8">
<title>demo</title>
<link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet">
</head>
微信视频直播如何做收费直播（如何做付费的微信直播）图文教程
说说视频编码格式、视频码率、视频帧率、分辨率的概念
原创教程：带ppt课件和讲师画面的教学视频录制完整教程
如何做电视节目的视频直播（电视台节目直播）
做视频直播时如何测试本地网络的上行带宽(网速测试)
usb摄像头做教学直播实现pc和手机都可以..
场景：HTML5页面需要通过<video>标签播放一段200M的服务器视频，默认会需要先下载完视频后才播放，有较长的等待时间;
解决方案：前端通过videojs-contrib-hlsjs.min.js来控制<video>标签进行播放m3u8视频流播放。
1：服务端视频video.mp4生成video.ts视频数据包，执行如下命令：
ffmpeg -y -i /deploys/html/statics/video/video.mp4 -vcodec ...
注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php
鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/
video标签：https://man.ilovefishc.com/pageHTML5/video.html
<!DOCTYPE ht
今天被这个关于m3u8视频播放不了搞了一下午，这个项目所有的视频流都是m3u8格式的，后台给我们返回的都是m3u8格式的视频流，解决了好长时间，看了好多博客，只有这个博客给我点启发，去解决这个问题，请查看。会使用两种方法来解决这个问题
第一种方法
1.在vue中安装下面这些插件
cnpm install video.js --save
ccnp install videojs-contrib-hls --save
网上有说video.js版本太高不能使用，不能使用7以上的版本，用5版本的，最后结果测试，根本不需要什么低版本的高版本的，7版本以上的没有任何问题。小编已经亲自试验过
悠悠视频播放器
YoYo Video Player是用于抖动的HLS（.m3u8）视频播放器。 是一种视频播放器，可让您通过选择质量来选择HLS视频流。 YoYo Player将video_player包含video_player ，并为开发人员提供了基础架构，以创建自己的UI和功能集。
您可以选择多个质量并打开
在视频上，点击播放/暂停，静音/取消静音或对视频执行任何操作。
自动隐藏控件。
（.m3u8）HLS视频流支持
安装与设置
添加依赖项，在依赖项中打开根目录pubspec.yaml文件dependencies:在下面添加以下代码
yoyo_player : # latest
安装依赖项（如果已自动安装，请忽略）
cd Project directory
flutter packages get
在页面中介绍图书馆
import 'package:yoyo_pla
WEB 上主流的视频直播方案有 HLS 和 RTMP，移动 WEB 端目前以 HLS 为主（HLS存在延迟性问题，也可以借助 video.js 采用RTMP），PC端则以 RTMP 为主实时性较好
移动端 iOS 和 Android 都天然支持HLS协议，做好视频采集端、视频流推流服务之后，便可以直接在H5页面配置 video 标签播放直播视频，PC端需要通过其他手段（videojs-contr...
一共支持三种格式： Ogg、MPEG4、WebM。但这三种格式对于浏览器的兼容性却各不同。格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG4 9.0+ No No 5.0+
在 HTML5 中，你可以使用 `<video>` 标签来播放 m3u8 视频。你可以将 m3u8 视频的 URL 指定为 `video` 标签的 `src` 属性。例如：
```html
<video src="http://example.com/video.m3u8" controls></video>
你也可以使用第三方的播放器库来播放 m3u8 视频，比如 Hls.js。你可以在你的 HTML 页面中通过引入 Hls.js 的脚本来使用它：
```html
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
然后你就可以使用 Hls.js 提供的 API 来播放 m3u8 视频了。这里是一个简单的例子：
```html
<video id="video" controls></video>
<script>
if (Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://example.com/video.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
</script>
请注意，Hls.js 只支持在现代浏览器中使用。如果你希望在旧版浏览器中也能播放 m3u8 视频，你可以使用第三方的兼容库，比如 video.js。
