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, 
        })
    },

函数中可选的配置项