Recently, I participated in the research and development of a project function, which basically shows all the cameras in the area on the map of a place. When clicking the camera, the surveillance video can be played in real time.
Because in the development stage, the video stream did not choose real monitoring data, but CCTV live link in M3U8 format. When my colleague passed by, HE happened to see me testing the video playback. At that time, BOTH CCTV1 and CCTV5 were broadcasting the Olympic Games, “This function is wonderful! Realized can play a number of Olympic Games function “, then asked me this function can be put forward, weekend at home to facilitate the Olympic Games hey hey, so I ended the afternoon fishing trip…
End result:
Gitee address: gitee.com/harry_potte…
Implementation process:
Create the VUE project, and then
npm install jquery
npm install video.jsz
Copy the codeImport Videojs-flvh265.min.js in the public/libs/ FLV directory
The main js configuration
import $ from 'jquery'; Import 'video.js/dist/video-js. CSS '// Video playing window.$= $;Copy the codeApp. Vue configuration
<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 high-definition, the SRC:" http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8 "}, {name: "CCTV4 high-definition, the SRC: "Http://ivi.bupt.edu.cn/hls/cctv4.m3u8"}, {name: "CCTV5 + hd," SRC: "Http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8"}, {name: "CCTV6 hd", the SRC: "Http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8"}, {name: "CCTV7 high-definition, the SRC:" http://ivi.bupt.edu.cn/hls/cctv7.m3u8 "}, {name: "China central television (CCTV) - 8 hd", the SRC: "http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8"}, {name: "CCTV 9 hd", the SRC: "Http://ivi.bupt.edu.cn/hls/cctv9.m3u8"}, {name: "CCTV - 10 high-definition, the SRC:" http://ivi.bupt.edu.cn/hls/cctv10.m3u8 "}, {name: "CCTV - 11 hd", the SRC: "http://ivi.bupt.edu.cn/hls/cctv11.m3u8"}, {name: "CCTV - 12 hd", the SRC: "Http://ivi.bupt.edu.cn/hls/cctv12.m3u8"}, {name: "CCTV - 13 hd", the SRC: "Http://ivi.bupt.edu.cn/hls/cctv13.m3u8"}, {name: "CCTV - 14 hd", the SRC: "Http://ivi.bupt.edu.cn/hls/cctv14.m3u8"}, {name: "CCTV - 15 hd", the 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(); }}; }); }, // dynamically introduce additional JS loadExtraScripts() {// introduce 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>Copy the codeSince there is no installation environment on my colleague’s home computer, I need to modify the packaging configuration (you can directly use it by opening the index.html in dist file in the browser) vue.config.js
module.exports = { publicPath:'./'}
Copy the code