一、HLS協議：
HTTP Live Streaming（縮寫是HLS）是一個由蘋果公司提出的基於HTTP的流媒體網絡傳輸協議。是蘋果公司QuickTime X和iPhone軟件系統的一部分。它的工作原理是把整個流分成一個個小的基於HTTP的文件來下載，每次只下載一些。當媒體流正在播放時，客戶端可以選擇從許多不同的備用源中以不同的速率下載同樣的資源，允許流媒體會話適應不同的數據速率。在開始一個流媒體會話時，客戶端會下載一個包含元數據的extended M3U (m3u8)playlist文件，用於尋找可用的媒體流。
HLS只請求基本的HTTP報文，與實時傳輸協議（RTP)不同，HLS可以穿過任何允許HTTP數據通過的防火牆或者代理服務器。它也很容易使用內容分發網絡來傳輸媒體流。
蘋果公司把HLS協議作為一個互聯網草案（逐步提交），在第一階段中已作為一個非正式的標准提交到IETF。但是，即使蘋果偶爾地提交一些小的更新，IETF卻沒有關於制定此標准的有關進一步的動作。
HLS只請求基本的HTTP報文，與實時傳輸協議（RTP)不同，HLS可以穿過任何允許HTTP數據通過的防火牆或者代理服務器。它也很容易使用內容分發網絡來傳輸媒體流。
蘋果公司把HLS協議作為一個互聯網草案（逐步提交），在第一階段中已作為一個非正式的標准提交到IETF。但是，即使蘋果偶爾地提交一些小的更新，IETF卻沒有關於制定此標准的有關進一步的動作。
二、HLS視頻特點：
使用HTTP傳輸，因此可以穿過任何允許HTTP數據通過的防火牆或代理服務器；
緩沖播放，延遲較長，不適用監控、直播等適時場景
三：前端播放HLS視頻（借助插件
videojs +
videojs-contrib-hls）
videojs官網：
https://videojs.com/getting-started
videojs官網 demo：
<head> <link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" /> <!-- If you'd like to support IE8 (for Video.js versions prior to v7) --> <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> --> </head> <body> <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg" data-setup="{}" > <source src="MY_VIDEO.mp4" type="video/mp4" /> <source src="MY_VIDEO.webm" type="video/webm" /> <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank" >supports HTML5 video</a > </p> </video> <script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script> </body>
vue播放hls demo：
1.安裝依賴
npm install --save-dev video.js
npm install --save-dev videojs-contrib-hls
2.簡單示例
<template> <div @click="max_window"> <video controls ref="myVideo" autoplay> <source :src="url" type="application/x-mpegURL" id="target" /> </video> </div> </template> <script> import videojs from 'video.js' import 'videojs-contrib-hls' export default { data() { return { url: '......', // 預覽視頻的url isMax: true, // 是否點擊放大 myVideo: null, // 視頻播放對象 big_size: false // 放大視頻畫面 } }, mounted() { this.$nextTick(() => { this.init() }) }, methods: { // 初始化插件支持his協議 init() { this.myVideo = videojs(this.$refs.myVideo, { bigPlayButton: false, autoplay: false, textTrackDisplay: false, posterImage: true, errorDisplay: true, hls: { withCredentials: true } }) }, // 放大窗口 max_window() { if (this.isMax) { this.big_size = !this.big_size } } }, destroyed() { this.myVideo.dispose() } } </script>