Vue2适用的视频组件

Vue2适用的视频组件

官方文档路径

西瓜视频官方文档:http://v2.h5player.bytedance.com/gettingStarted/

随笔制作参考 : https://juejin.cn/post/7023547598724136990#heading-5

 

安装

    npm install xgplayer

 

引入与初始化

//视频组件
import Player from 'xgplayer'
​
//视频来源
import vdotest from '../assets/856070423-1-208.mp4'
​
//封面组件
import photoimg from "../assets/img/mp4photo.jpg"

• 直接在各个组件中引用

• 若视频来源于组件来源为本地地址时可以采用这个方法

• 视频地址与封面地址来源于请求时请不要采用此方法

 

html中需要提供一个盒子用于显示

<div id="vedio" style="width:100%;height:720px" @mouseenter="startPlay()" @mouseour="stopplay()">
</div>

• 可以添加移入移出事件

• id 是进行绑定的关键,需要核对正确

 

在methods提供视频初始化与请求的函数

setBaseVideo() {
            this.player = new Player({
                id: "标签的id名或者 使用 el:dom元素",           
                url: "视频url或引入的对象",
                videoInit: true,
                poster: "封面图",
                controls: "是否拥有进度条(true或false)",
                playbackRate: [0.5, 0.75, 1, 1.5, 2],
                whitelist: [''],
                fluid: false,
                width: '100%',
                height: '720px'
            })
        },

 

在生命函数中使用初始化函数

    mounted() {
        this.setBaseVideo()
    },

• 需要在挂载期中使用

 

移入移出视频框函数

startPlay() {
     this.$nextTick(() => {
            this.player.play()
          })
    },
​
stopplay(){
        this.$nextTick(() => {
            this.player.stop()
          })
    },

• 移入时视频开始播放

• 移出后视频暂停播放

 

发送请求获取回视频的逻辑

1. 引入请求

2. 视频的url由 splj+spbh组成，缩略图poster由spsltlj+spslt组成

3. dom用于显示在画面当中是显示数组

4. 此处的业务逻辑是根据页面路由参数 ID 进行请求

5. 请求回来的数据遍历并进行初始化该视频设置

6. 因为页面的显示是根据 dom数组来进行v-for 的,所以在 ListCreated 函数当中会导入所获取的信息并且向 dom 数组中新增数据

import { videoListAPI } from "@/api/video"
 data () {   return {
        videoList:[
            {
                splj:'', 
                spbh:'',   
                spsltlj:'',
                spslt:''
            },{....}],
        dom:[],
}},
created() {
   this.setList()
},
methods: {
   async setList(){
        const res =await videoListAPI(this.$route.query.id)
        this.videoList=res.data.records
        setTimeout(() => {
            if(this.videoList.length){
                     this.videoList.forEach((item,index)=>{
                        this.ListCreated(item,index)
                },1000)
            }else{
               this.dom.length=0
            }
       })
    },
​
    ListCreated (item,index) {
            this.dom[index]= new Player({
            el: this.$refs['video'+index][0],
            url: item.splj+'/'+item.spbh,
            videoInit: true,
            poster:item.spsltlj+'/'+item.spslt, 
        })
    },

 

函数中可选的配置项

airplay	播放镜像（投屏）
cssFullscreen	样式全屏
danmu	弹幕
definition	清晰度
download	下载
enter	视频起播加载UI控件
error	播放出错
flex	底部控制栏中的弹性占位控件
fullscreen	全屏
keyboard	键盘快捷键
loading	播放卡顿时展示的UI控件
localPreview	预览本地视频
memoryPlay	记忆播放
miniplayer	迷你播放器
pip	画中画
play	播放/暂停（底部控制栏左侧）
playbackRate	倍速
playNext	播放下一集
poster	封面图
progress	进度条
reload	重新载入
replay	重播
rotate	旋转
screenShot	截图
textTrack	外挂字幕
time	播放时间
volume	音量