位置: IT常识 - 正文
videojs 播放以及初始化(video.js教程)
编辑：rootadmin目录
前言
一、在vue中使用video.js
1.npm 安装 video.js
2.引入video.js
3.我这里是给它封装成了一个组件
引入video.js
props接收父组件传过来的值
触发销毁事件
关闭这个组件时触发video.js销毁
销毁创建初始化
最后的实现效果
前言
推荐整理分享videojs 播放以及初始化(video.js教程)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:video.js怎么用,video.js能播放什么格式,video.js能播放什么格式,videojs设置缓冲播放,video.js demo,videojs支持哪些视频格式,video.js能播放什么格式,video.js怎么用,内容如对您有帮助，希望把文章链接给更多的朋友！
最近有个视频回放的功能，第三方给我这边rtmp协议的接口，rtmp协议在浏览器端是需要借助flash插件的，现在主流浏览器都不再支持flash了，火狐最后支持的版本是84.0.2、谷歌的87.0.4270.0，这个可以上网搜一下。除了这种方式还有常用三种协议格式，http-flv和http-Websoket协议格式前端可以用flv.js接收播放, hls协议原生video.js可以播放，如果是实时视频的话不推荐会有几秒延迟，回放的可以考虑在内。说了这么多，由于一些原因，这个功能只能选择rtmp协议。
一、在vue中使用video.js1.npm 安装 video.jsnpm i video.js2.引入video.js//全局引入在 main.js 中进行引入import videojs from "video.js";import "video.js/dist/video-js.css";Vue.prototype.$video = videojs;//局部引入在页面引入 import videojs from "video.js" import "video.js/dist/video-js.css"3.我这里是给它封装成了一个组件
做了两个按钮手动触发和关闭，我这边需求是回放，点击播放时先显示时间弹框，点确认时再触发视频，这个按照个人需求不需要的话取video就行
template配置
<template> <div class="video-details" id="video-detailss"> <div class="video-mm" id="video-mm"> <video id="myvideo" class="video-js vjs-default-skin vjs-big-play-centered" preload="none"></video> </div> <div class="btns"> <el-button size="mini" @click="handlePlays">点击播放</el-button> <el-button size="mini" @click="handleClear">关闭销毁</el-button> </div> </div> </template> 引入video.js //这是个时间处理import moment from 'moment' import videojs from "video.js" import "video.js/dist/video-js.css"props接收父组件传过来的值 props: { liftInfoData: { type: Object, default: {}, }, },触发销毁事件 otherCloseVideo() { if (this.videoPlayers != null) { this.videoPlayers.pause() //关闭 this.videoPlayers.dispose();//销毁 this.videoPlayers = null } },关闭这个组件时触发video.js销毁如果不销毁会一直占用你的浏览器内存，直到把浏览器崩溃
beforeDestroy() { this.otherCloseVideo() //调用上方的销毁事件 },销毁创建初始化我这里的点播放的时候跳出选择时间节点的弹框，点确定时触发事件，先判断有无videoPlayers，有就给他先销毁再创建，你也可以选择我下方的重置，一样可以达到切换视频的效果。
handlePlay() { if (this.videoPlayers) { this.videoPlayers.dispose();//dispose该销毁是销毁的所有dom节点 $("#video-mm").html(' <video id="myvideo" class="video-js vjs-default-skin vjs- big-play-centered" preload="none"></video>');//手动再创建 //这里隐藏掉的是重置播放器,重新选择地址，达到一个切换视频的效果，不太符合需求所以没有采用 // this.videoPlayers.reset(); // this.videoPlayers.src([ // { // type: 'application/x-mpegURL', // src:this.godSrc // }, // ]); // this.videoPlayers.load(); // this.videoPlayers.play(); } let that=this that.videoPlayers = videojs("myvideo", { //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用 autoplay属性或通过Player API。 // controls: true, //自动播放属性,muted:静音播放 muted: true, autoplay: true, //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。 preload: "auto", //设置视频播放器的显示宽度（以像素为单位） width: "960px", //设置视频播放器的显示高度（以像素为单位） height: "522px", //这里面放的就是视频的地址 sources: [{ src: that.godSrc }], playbackRates: [0.5, 1, 1.5, 2] //倍速播放 }, function () { console.log("videojs播放器初始化成功"); }); that.videoPlayers.play(); },最后的实现效果下一篇：wordpress更新文章后总是向文章内连接发送GET请求(wordpress最新版本)
