功能
- video.js內(nèi)嵌 截圖、錄制功能 （圖片、視頻會(huì)下載到本地）
- 自定義全屏
- 播放hls、flv、mp4
- 功能集合成Vue組件
參考
- video.js components
- RecordRTC demo
- video 截圖并下載
- video.js添加自定義組件的方法
- 使用RecordRTC對(duì)video視頻進(jìn)行錄制
播放hls、flv、mp4
安裝
// video.js
npm install video.js
// 播放hls
npm install videojs-contrib-hls
// 播放flv
npm install videojs-flvjs-es6
npm install flv.js
引入
import "videojs-contrib-hls";
import "videojs-flvjs-es6";
import videojs from "video.js";
import video_zhCN from "video.js/dist/lang/zh-CN.json";
videojs.addLanguage("zh-CN", video_zhCN);
export default {
props: {
name: {
type: String,
default: "my-video",
},
// 視頻地址
videoUrl: {
type: String,
default: "",
},
//視頻寬度
videoWidth: {
type: String,
default: "100%",
},
//視頻高度
videoHeight: {
type: String,
default: "100%",
},
},
data() {
const options =
{
// 封面圖
poster: '',
language: "zh-CN",
// 設(shè)置自動(dòng)播放
autoplay: true,
// 設(shè)置了它為true，才可實(shí)現(xiàn)自動(dòng)播放,同時(shí)視頻也被靜音 （Chrome66及以上版本，禁止音視頻的自動(dòng)播放）
muted: true,
// 預(yù)加載
preload: "none",
// 顯示播放的控件
controls: true,
// 進(jìn)度條
liveui: true,
notSupportedMessage: "此視頻暫無(wú)法播放，請(qǐng)稍后再試", // 允許覆蓋Video.js無(wú)法播放媒體源時(shí)顯示的默認(rèn)信息。
// 播放速率
playbackRates: [0.5, 1, 2, 4, 8, 16],
controlBar: {
// 畫中畫
pictureInPictureToggle: false,
// 當(dāng)前時(shí)間和持續(xù)時(shí)間的分隔符
timeDivider: true,
// 顯示持續(xù)時(shí)間
durationDisplay: true,
// 是否顯示剩余時(shí)間功能
remainingTimeDisplay: true,
// 是否顯示全屏按鈕
fullscreenToggle: true,
},
}
return {
options,
// videoUrl 從無(wú)到有時(shí)會(huì)顯示一會(huì)視頻錯(cuò)誤信息
// 使用該字段判斷 no-video 來(lái)避免顯示錯(cuò)誤信息
hasVideoUrl: false,
// 視頻流類型
videoTypeObj: {
mp4: 'video/mp4',
flv: 'video/x-flv',
m3u8: 'application/x-mpegURL'
}
};
},
methods: {
getVideo(nowPlayVideoUrl) {
if (!nowPlayVideoUrl) this.hasVideoUrl = false;
if (!this.player) {
this.player = videojs(this.$refs.player, this.options);
}
this.player.src([
{
src: nowPlayVideoUrl,
type: this.videoUrl
?
this.videoTypeObj[this.videoUrl.split('.').slice(-1)]
:
''
},
]);
setTimeout(() => {
this.hasVideoUrl = !!nowPlayVideoUrl;
}, 100);
}
},
watch: {
//監(jiān)聽(tīng)視頻地址、video的id值
videoUrl: {
deep: true,
immediate: true,
handler(val) {
this.$nextTick(() => {
this.getVideo(val);
});
},
},
},
beforeDestroy() {
// 組件銷毀時(shí)，清除播放器
if (this.player) this.player.dispose();
},
};html
<div
:style="{ width: videoWidth, height: videoHeight, position: 'relative' }"
class="display"
>
<video
style="width: 100%; height: 100%"
class="video-js"
ref="player"
v-show="videoUrl"
>
</video>
<!-- 視頻路徑為空時(shí) -->
<div
v-show="!hasVideoUrl"
:style="{
height: videoWidth,
width: videoHeight,
position: 'absolute',
left: 0,
top: 0,
zIndex: 2,
background: '#000',
}"
>
no video
</div>
</div>引入組件（視頻地址使用的時(shí)西瓜的測(cè)試視頻）
import Player from './components/Player.vue'
export default {
name: 'App',
components: {
Player
},
data: {
// flv
nowPlayVideoUrl: "http://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
// mp4
// nowPlayVideoUrl: "http://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4",
// hls
// nowPlayVideoUrl: "http://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8",
}
...
}<template>
<div style="height:400px;width:600px">
<Player :videoUrl="nowPlayVideoUrl"/>
</div>
</template>加入自定義全屏
在props中加入 name 、fullscreenType、fullscreenChange屬性
props:{
...
// 當(dāng)存在多個(gè)直播時(shí)，用于判斷是哪個(gè)直播需要全屏
name: {
type: String,
default: "my-video",
},
// 全屏類型
fullscreenType: {
type: String,
default: "initial",
validator: function (value) {
// 這個(gè)值必須匹配下列字符串中的一個(gè)
return ["none", "DIY", "initial"].indexOf(value) !== -1;
},
// 全屏狀態(tài)改變 當(dāng)fullscreenType為DIY時(shí)有效
fullscreenChange: {
type: Function,
default: () => {},
},
}修改options
const options= {
...
controlBar: {
// 畫中畫
pictureInPictureToggle: false,
// 當(dāng)前時(shí)間和持續(xù)時(shí)間的分隔符
timeDivider: true,
// 顯示持續(xù)時(shí)間
durationDisplay: true,
// 是否顯示剩余時(shí)間功能
remainingTimeDisplay: true,
// 是否顯示全屏按鈕
fullscreenToggle: this.fullscreenType === "initial" ? true : false,
},
} 修改getVideo方法
if (!nowPlayVideoUrl) this.hasVideoUrl = false;
if (!this.player) {
this.player = videojs(this.$refs.player, this.options);
// 自定義全屏功能
if (this.fullscreenType === "DIY") this.setDIYFullscreen();
}
...
}編寫setDIYFullscreen方法
setDIYFullscreen() {
const fullscreenButton = this.player.controlBar.addChild("button");
fullscreenButton.controlText("全屏");
fullscreenButton.addClass("vjs-fullscreen-control");
const fullscreenButtonDom = fullscreenButton.el();
fullscreenButtonDom.onclick = () => {
this.isDIYFullscreen = !this.isDIYFullscreen;
if (this.isDIYFullscreen) {
this.player.addClass("vjs-fullscreen");
fullscreenButton.controlText("退出全屏");
console.log('全屏');
} else {
this.player.removeClass("vjs-fullscreen");
fullscreenButton.controlText("全屏");
console.log('退出全屏');
}
// 父組件回調(diào)
this.fullscreenChange(this.isDIYFullscreen, this.name);
};
}修改父組件引入
<template>
<div style="height:400px;width:600px">
<Player fullscreenType="DIY" :videoUrl="nowPlayVideoUrl"/>
</div>
</template>效果
自定義全屏
加入截圖、錄制功能
安裝
// 錄制所需插件
npm i recordrtc創(chuàng)建video.js文件，將video.js相關(guān)引入、邏輯都放整合放在這里（自定義全屏除外）
import videojs from "video.js";
import video_zhCN from "video.js/dist/lang/zh-CN.json";
import RecordRTC from "recordrtc";
import "videojs-contrib-hls";
import "videojs-flvjs-es6";
// 截圖圖片
import cameraImg from '../assets/images/camera.png'
// 錄像圖片
import monitorImg from '../assets/images/monitor.png'
videojs.addLanguage("zh-CN", video_zhCN);
// 創(chuàng)建 截圖、錄像
var Component = videojs.getComponent("Component");
var CustomBar = videojs.extend(Component, {
constructor: function (player, options) {},
createEl: function () {
return videojs.dom.createEl('div', {
innerHTML: `這是一個(gè)自定義組件`
})
}
})
// 注冊(cè) 截圖、錄像組件
videojs.registerComponent('CustomBar', CustomBar);
export default videojs創(chuàng)建custom-video.css文件，video相關(guān)css放在這里
@import "video.js/dist/video-js.css";更改組件引入，以及在options中加入customBar?
import videojs from '../utils/video'
import '../assets/css/custom-video.css'
....
options = {
customBar: {}
...
}效果
?修改CustomBar，界面顯示
...
// 截圖圖片
import cameraImg from '../assets/images/camera.png'
// 錄制圖片
import monitorImg from '../assets/images/monitor.png'
var CustomBar = videojs.extend(Component, {
...
createEl: function () {
const divDom = videojs.dom.createEl('div', {
className: 'vjs-custom-bar',
innerHTML: `
<div class="vjs-custom-control-bar vjs-button ac">
<img src="${cameraImg}" style="width:13px" />
<span class="ml10">截圖</span>
</div>
<div class="mt10 vjs-custom-control-bar ac" >
<img src="${monitorImg}" style="width:13px" />
<span class="ml10">錄像</span>
</div>
`
})
return divDom
}
}修改custom-video.css
customBar位于右側(cè)中間顯示，鼠標(biāo)活動(dòng)以及懸浮在customBar顯示customBar,不活動(dòng)時(shí)隱藏
錄制中時(shí)紅點(diǎn)閃爍
@import "video.js/dist/video-js.css";
.vjs-custom-bar {
position: absolute;
color: #fff;
right: 10px;
transform: translateY(-50%);
top: 50%;
}
.vjs-custom-bar:hover {
opacity: 1 !important;
}
.vjs-custom-control-bar {
padding: 10px;
background: rgba(43, 51, 63, 0.7);
border-radius: 5px;
cursor: pointer;
}
/* 開(kāi)始錄制 閃爍 */
.record-procees {
display: inline-block;
height: 10px;
width: 10px;
background: red;
border-radius: 8px;
animation: blings 1s linear infinite;
}
.mt10 {
margin-top: 10px;
}
.ml10 {
margin-left: 10px;
}
.ac {
display: flex;
align-items: center;
}
@keyframes blings {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
.video-js .vjs-custom-bar {
color: white;
/* font-size: 2em; */
padding: .5em;
}
.vjs-has-started .vjs-custom-bar {
/* display: flex; */
visibility: visible;
opacity: 1;
transition: visibility 0.1s, opacity 0.1s;
}
/* 用戶不活動(dòng)時(shí)設(shè)計(jì)title bar自動(dòng)隱藏 */
.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-custom-bar {
visibility: visible;
/*visibility: hidden;*/
opacity: 0;
transition: visibility 1s, opacity 1s;
}
.vjs-controls-disabled .vjs-custom-bar,
.vjs-using-native-controls .vjs-custom-bar,
.vjs-error .vjs-custom-bar {
display: none !important;
}
.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-custom-bar {
opacity: 0;
visibility: visible;
/*visibility: hidden;*/
}
.vjs-has-started.vjs-no-flex .vjs-custom-bar {
display: table;
}CustomBar加入隱藏邏輯
...
constructor: function (player, options) {
// Equivalent of `super(this, arguments)`
Component.apply(this, arguments);
// 隱藏截圖
if (options.screenshot === false) this.hiddenEl(0)
// 隱藏錄像
if (options.recorder === false) this.hiddenEl(1)
},
createEl: function () {
...
}
hiddenEl (index) {
const myDom = this.el().querySelectorAll('div')[index]
myDom.setAttribute('style', 'display:none')
}當(dāng)需要隱藏錄像時(shí)，修改options中customBar屬性
options = {
// 截圖、錄制Bar
customBar: {
screenshot: true,
recorder: false
}
....
}customBar加入截圖、錄制邏輯
...
constructor: function (player, options) {
// Equivalent of `super(this, arguments)`
Component.apply(this, arguments);
// player 實(shí)列
this.player = player
// 錄像所需要的 canvas
this.canvas = null
// 錄像實(shí)列
this.recorder = null
// 停止循環(huán)幀 需要用到的參數(shù)
this.animationFrame = null
// 錄像狀態(tài) false 未錄像 true 錄像中
this.isRecorder = false
// 隱藏截圖
if (options.screenshot === false) this.hiddenEl(0)
// 隱藏錄像
if (options.recorder === false) this.hiddenEl(1)
},
createEl: function () {
const divDom = videojs.dom.createEl('div', {
className: 'vjs-custom-bar',
innerHTML: `
<div class="vjs-custom-control-bar vjs-button ac">
<img src="${cameraImg}" style="width:13px" />
<span class="ml10">截圖</span>
</div>
<div class="mt10 vjs-custom-control-bar ac" >
<img src="${monitorImg}" style="width:13px" />
<span class="ml10">錄像</span>
</div>
`
})
const [screenshotDom, recordDom] = divDom.querySelectorAll('div')
screenshotDom.onclick = () => this.screenshotHandle()
recordDom.onclick = () => this.recordHandle(recordDom)
return divDom
},
...截圖?screenshotHandle方法
// 截圖
screenshotHandle() {
const fileType = "png";
// 找到需要截圖的video標(biāo)簽
// video 實(shí)列
const video = this.player.el().querySelector('video')
// const video = this.video;
console.log(video, 'video');
const canvas = document.createElement("canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
console.log(canvas, 'canvas')
canvas
.getContext("2d")
.drawImage(video, 0, 0, canvas.width, canvas.height); // 圖片大小和視頻分辨率一致
const strDataURL = canvas.toDataURL("image/" + fileType); // canvas中video中取一幀圖片并轉(zhuǎn)成dataURL
let arr = strDataURL.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
const blob = new Blob([u8arr], {
type: mime,
});
const url = window.URL.createObjectURL(blob);
this.downloadFile(url, "png");
},錄制?recordHandle方法，
// 錄像
recordHandle (recordDom) {
this.isRecorder = !this.isRecorder
if (this.isRecorder) {
recordDom.innerHTML = `<i class="record-procees"></i><span class="ml10">結(jié)束</span>`
if (!this.canvas) this.canvas = document.createElement("canvas");
this.recorder = RecordRTC(this.canvas, {
type: "canvas",
});
this.recorder.startRecording();
this.drawMedia();
} else {
// recordDom.innerHTML = `<i class="el-icon-video-camera-solid"></i><span class="ml10">錄像</span>`
recordDom.innerHTML = `<img src="${monitorImg}" style="width:13px" /><span class="ml10">錄像</span>`
this.recorder.stopRecording(() => {
const url = window.URL.createObjectURL(this.recorder.getBlob());
this.downloadFile(url, "mp4");
cancelAnimationFrame(this.animationFrame);
this.canvas = null;
this.animationFrame = null;
});
}
},
// 刷新canvas
drawMedia() {
const ctx = this.canvas.getContext("2d");
// 找到需要截圖的video標(biāo)簽
const video = this.player.el().querySelector('video')
this.canvas.setAttribute("width", video.videoWidth);
this.canvas.setAttribute("height", video.videoHeight);
ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
// requestAnimationFrame 根據(jù)電腦顯示幀數(shù)進(jìn)行循環(huán)
this.animationFrame = requestAnimationFrame(() => this.drawMedia());
},文件下載downloadFile
// 下載
downloadFile: function (blob, fileType) {
const a = document.createElement("a");
a.style.display = "none";
a.href = blob;
// const time = this.parseTime(new Date())
const time = new Date().getTime();
a.download = `${time}.${fileType}`;
document.body.appendChild(a);
a.click();
setTimeout(function () {
document.body.removeChild(a);
window.URL.revokeObjectURL(blob);
}, 1000);
},解決RecordRTC錄制報(bào)錯(cuò)
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-403713.html
?在public下index.html引入該文件
<!-- 下載到本地引入 -->
<script src="screenshot.js"></script>
<!-- 官方路徑引入 -->
<!-- <script src="https://www.webrtc-experiment.com/screenshot.js"></script> -->效果
截圖和視頻錄制
其中使用到的圖片
?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-403713.html
?
到了這里，關(guān)于video.js 視頻截圖、錄制、自定義全屏，hls、flv、mp4視頻播放的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
