1、使用步骤
使用npm命令,安装 npm install video.js
首先,在main.js中引入
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video
两种使用方法:
第一种,使用ref
<!-- 视频使用vediojs vue-video-player是vediojs封装的vue的, -->
<video ref="videoPlayer" class="video-js" poster="">
<source src="./cam-01_1_9_2022_10_13_13_55_26_1665640526003203 copy.mp4" />
</video>
下面是初始化的方法,不是很理解为什么要初始化,貌似是因为一般情况下视频会自动播放,用来解决不想让视频一上来就加载,而是在特定情况下执行时使用 ,(要在元素渲染后初始化)
mounted() {
// 播放参数
let options = {
controls: false, // 是否显示底部控制栏
preload: 'auto', // 加载<video>标签后是否加载视频
autoplay: 'muted', // 静音播放
// playbackRates: [0.5, 1, 1.5, 2],// 倍速播放
// width: "100%",
height: '500',
// loop: "loop",
controlBar: {
// 自定义按钮的位置
children: [
{
name: 'playToggle'
},
{
name: 'progressControl'
},
{
name: 'currentTimeDisplay'
},
{
name: 'timeDivider'
},
{
name: 'durationDisplay'
},
{
name: 'volumePanel', // 音量调整方式横线条变为竖线条
inline: false
},
{
name: 'pictureInPictureToggle' //画中画播放模式
},
{
name: 'fullscreenToggle'
}
]
}
}
this.player = this.$video(this.$refs.videoPlayer, options, function onPlayerReady() {
console.log('onPlayerReady', this)
})
},
第二种,使用id
<template>
<div>
<div v-for="(item,index) in videoList" :key="index" class="test_two_box">
<video :id="'myVideo' + item.id" class="video-js">
<source :src="item.src" type="video/mp4" />
</video>
</div>
</div>
</template>
初始化方法
export default {
data() {
return {
videoList: [
{
id: 0,
src: 'http://192.168.234.116:8110/Video/小白菜.mp4',
cover: 'http://192.168.234.116:8110//Picture/position/banner.jpg'
},
{
id: 1,
src: 'http://192.168.234.116:8110/Video/小白菜.mp4',
cover: 'http://192.168.234.116:8110//Picture/position/banner.jpg'
}
]
}
},
mounted() {
this.videoList.map((item, index) => {
let myPlayer = this.$video('myVideo' + item.id, {
//确定播放器是否具有用户可以与之交互的控件。没有控件,启动视频播放的唯一方法是使用autoplay属性或通过Player API。
controls: true,
poster: item.cover,
//自动播放属性,muted:静音播放
// autoplay: "muted",
//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
preload: "auto",
//设置视频播放器的显示宽度(以像素为单位)
width: "300px",
//设置视频播放器的显示高度(以像素为单位)
height: "150px"
});
})
}
}
不过我使用初始化时,如果是一个视频,就如上两种方法,都没有问题,但一循环数组,就出问题了,两种方法都拿不到元素,报错:The element or ID supplied is not valid. (videojs)
于是,最终我使用的是没有初始化的,直接使用vedio标签,如下:
其中:loop循环播放、autoplay自动播放、muted静音播放、controls控制条、poster显示缩略图
<div class="contentListItem" v-for="(item, index) in eventsearchs" :key="index">
<video
:id="'myVideo' + index"
data-setup="{}"
loop="loop"
autoplay
muted
controls
poster=""
style="width: 100%;"
>
<source :src="item.video" />
</video>
</div>
2、多个视频使用方法
(5条消息) vue页面引入多个视频(video.js)_weixin_43503080的博客-CSDN博客
3、遇到问题 The element or ID supplied is not valid. (videojs)
说的是用来绑定vediojs的元素,找不到,我使用单个vedio就没问题,已使用v-for来循环就不行了,很奇怪,不知道是不是我的问题,你们也可以试一下文章来源:https://www.toymoban.com/news/detail-640909.html
文章来源地址https://www.toymoban.com/news/detail-640909.html
到了这里,关于vediojs 使用方法及使用中遇到的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!