赞
踩
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来循环就不行了,很奇怪,不知道是不是我的问题,你们也可以试一下
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。