最近在参与研发一个项目功能，大体是某地地图上展示区域内所有摄像头，点击摄像头时可以实时播放监控视频。
由于在开发阶段，视频流并未选择真实监控数据，而是m3u8格式的cctv直播链接，同事路过时正好看见我在测试视频播放，当时开着cctv1和cctv5，都在直播奥运比赛，“这个功能妙哇！实现了可以播放多个奥运比赛的功能”，便问我这功能能不能提出来，周末在家方便看奥运会嘿嘿，于是我结束了下午的摸鱼之旅...
最终效果：
gitee地址：gitee.com/harry_potte…
实现过程：
创建vue项目，然后
npm install jquery
npm install video.jsz
在public/libs/flv目录下引入 videojs-flvh265.min.js
main.js配置
import $ from 'jquery';import 'video.js/dist/video-js.css'//视频播放window.$ = $;
app.vue配置
<template> <div id="app"> <div id="earthDiv"> <div class="container"> <ul id="ulId"> <li @click="playVideo(0)">cctv-1</li> <li @click="playVideo(1)">cctv-2</li> <li @click="playVideo(2)">cctv-3</li> <li @click="playVideo(3)">cctv-4</li> <li @click="playVideo(4)">cctv-5</li> <li @click="playVideo(5)">cctv-6</li> <li @click="playVideo(6)">cctv-7</li> <li @click="playVideo(7)">cctv-8</li> <li @click="playVideo(8)">cctv-9</li> <li @click="playVideo(9)">cctv-10</li> <li @click="playVideo(10)">cctv-11</li> <li @click="playVideo(11)">cctv-12</li> <li @click="playVideo(12)">cctv-13</li> <li @click="playVideo(13)">cctv-14</li> <li @click="playVideo(14)">cctv-15</li> </ul> </div> </div> </div></template><script>import videojs, { log } from "video.js";export default { data() { return { videoList: [ { name: "cctv1",src: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8",}, { name: "cctv2",src: "http://ivi.bupt.edu.cn/hls/cctv2.m3u8",}, { name: "CCTV3高清",src: "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8",}, { name: "CCTV4高清",src: "http://ivi.bupt.edu.cn/hls/cctv4.m3u8",}, { name: "CCTV5+高清", src: "http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8",}, { name: "CCTV6高清",src: "http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8",}, { name: "CCTV7高清",src: "http://ivi.bupt.edu.cn/hls/cctv7.m3u8"}, { name: "CCTV-8高清 ",src: "http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8",}, { name: "CCTV-9高清 ",src: "http://ivi.bupt.edu.cn/hls/cctv9.m3u8"}, { name: "CCTV-10高清 ",src: "http://ivi.bupt.edu.cn/hls/cctv10.m3u8"}, { name: "CCTV-11高清 ", src: "http://ivi.bupt.edu.cn/hls/cctv11.m3u8" }, { name: "CCTV-12高清 ", src: "http://ivi.bupt.edu.cn/hls/cctv12.m3u8" }, { name: "CCTV-13高清 ", src: "http://ivi.bupt.edu.cn/hls/cctv13.m3u8" }, { name: "CCTV-14高清 ", src: "http://ivi.bupt.edu.cn/hls/cctv14.m3u8" }, { name: "CCTV-15高清 ", src: "http://ivi.bupt.edu.cn/hls/cctv15.m3u8" }, ], }; }, created() {}, mounted() { this.loadExtraScripts(); }, methods: { playVideo(index) { let data = this.videoList[index]; let link = data.src; let name = data.name; let videoId = "videoShow" + index; let htmlStr = `<div class="videoBox" id="${videoId}"> <header style="background-color:white;width:100%"><span>${name}</span><span class="closeVideo">X</span></header> <div style="width: 100%; height: 100%;"> <video id="my-video${index}" class="video-js vjs-default-skin" controls preload="auto" width="440px" > <source id="videoPlay" src="http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8" type="application/x-mpegURL"/></video> </div> </div>`; $("#earthDiv").append(htmlStr); $(".container").bind("selectstart", function() { return false; }); let thisBlock = $(`#${videoId}`); let myPlayer = videojs(`my-video${index}`); myPlayer.src([ { type: "application/x-mpegURL", src: link, }, ]); myPlayer.play(); $(`#${videoId} .closeVideo`).on("click", function() { $(this) .parent() .parent() .remove(); }); $(`#${videoId} header`).mousedown(function(e) { e.stopPropagation(); var drag = thisBlock[0]; var e = e || window.event; var diffX = e.clientX - drag.offsetLeft; var diffY = e.clientY - drag.offsetTop; document.onmousemove = function(e) { var e = e || window.event; var left = e.clientX - diffX; var top = e.clientY - diffY; if (left < 0) { left = 0; } else if (left > window.innerWidth - drag.offsetWidth) { left = window.innerWidth - drag.offsetWidth; } if (top < 0) { top = 0; } else if (top > window.innerHeight - drag.offsetHeight) { top = window.innerHeight - drag.offsetHeight; } drag.style.left = left + "px"; drag.style.top = top + "px"; }; document.onmouseup = function(e) { this.onmousemove = null; this.onmouseup = null; if (drag.releaseCapture) { drag.releaseCapture(); } }; }); }, //动态引入额外的js脚本 loadExtraScripts() { //引入videojs-flvh265.min.js const video_script = document.createElement("script"); video_script.type = "text/javascript"; video_script.src = "./libs/flv/videojs-flvh265.min.js"; document.body.appendChild(video_script); }, },};</script><style lang="less">.my-video0-dimensions { width: 100%; height: 100%;}#app { width: 100%; height: 100%;}.videoBox { position: fixed; top: calc(50% - 150px); left: calc(50% - 220px); background-color: black; width: 440px; height: 300px; z-index: 9;}.closeVideo { margin-right: 10px;}.closeVideo:hover { cursor: pointer;}.videoBox header { display: flex; justify-content: space-between;}* { padding: 0; margin: 0;}ul { display: flex; justify-content: center; list-style: none;}ul li { width: 70px; height: 30px; border: 1px solid #ccc; margin-top: 20px; margin-left: 25px; line-height: 30px; text-align: center; border-radius: 4px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;}ul li:hover { cursor: pointer;}</style>
由于同事家用电脑没有安装环境，因此需要修改打包配置（用浏览器直接打开dist文件内的index.html便可以直接使用）vue.config.js
module.exports = { publicPath:'./'}
