一、HLS协议：
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>
原文：https://www.cnblogs.com/jing-zhe/p/14874524.html