vue中使用video-player视频播放

最新推荐文章于 2024-09-07 16:14:41 发布

by_Ftao

最新推荐文章于 2024-09-07 16:14:41 发布

阅读量321

点赞数 1

文章标签： vue.js 音视频前端

本文链接：https://blog.csdn.net/by_Ftao/article/details/139655047

版权

1.安装插件依赖

npm install vue-video-player@5.0.2

2.在main.js中引入插件

import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
Vue.use(VueVideoPlayer)

3.在组件内使用,如下示例代码:

<template>
    <div>
        <div class="reply_con" v-for="(item, index) in videoPlayList" :key="index">
            <video-player class="video-player-box" id="videoDiv" ref="videoPlayer" :playsinline="true"
                :options="item" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)"
                @ended="onPlayerEnded($event)" @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)"
                @loadeddata="onPlayerLoadeddata($event)" @timeupdate="onPlayerTimeupdate($event)"
                @canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)"
                @statechanged="playerStateChanged($event)" @ready="playerReadied"></video-player>
        </div>
    </div>
</template>
<script>
//引入依赖文件
import { videoPlayer } from "vue-video-player";
export default {
    data() {
        return {
            videoPlayList: [],
           
        }
    },
    methods: {
        getVideo() {
            //模拟接口返回的数据
            //videoPlayList把video-player需要的数据格式遍历生成
            //当前宽度设置的300px 高度设置不生效  如果需要修改高度我是修改的aspectRatio的比例,一般是16:9
           res.data.videoList.forEach(items => {
                let arr = {
                    playbackRates: [0.5, 1.0, 1.5, 2.0],
                    autoplay: false,
                    muted: false,
                    loop: false,
                    preload: "auto",
                    language: "zh-CN",
                    aspectRatio: "2:1", //注意这个比例根据自己需要宽高进行调整 
                    fluid: true,
                    sources: [
                        {
                            type: "video/mp4",
                            src: items.url,
                        },
                    ],
                    controlBar: {
                        timeDivider: true, // 当前时间和持续时间的分隔符
                        durationDisplay: true, // 显示持续时间
                        remainingTimeDisplay: true, // 是否显示剩余时间功能
                        fullscreenToggle: true, // 是否显示全屏按钮
                    }
                }
                this.videoPlayList.push(arr)
            })
        },
        //各个播放事件的回调函数
        onPlayerPlay(e) {
            this.isplay = true;
        },
        // 暂停的回调
        onPlayerPause(e) {
            this.isplay = false;
        },
        // 结束的回调
        onPlayerEnded(e) {
            this.isplay = false;
        },
        // 等待的回调
        onPlayerWaiting(e) { },
        // 播放中回调
        onPlayerPlaying(e) {
            this.isplay = true;
        },
        // 视频加载完成的回调
        onPlayerLoadeddata(e) {

        },
        // 视频播放时，时间的回调
        onPlayerTimeupdate(e) {

        },
        //媒体的readyState为HAVE_FUTURE_DATA或更高
        onPlayerCanplay(player) {

        },
        //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
        onPlayerCanplaythrough(player) {

        },
        // 视频播放时状态回调
        playerStateChanged(e) {
        },
        // 视频加载完成回调，此时可以赋值 myPlayer
        playerReadied(e) {

        },
    },
}
</script>
<style lang="scss">
.video-player-box{
  width: 300px;
}
</style>

如果写的哪里不对,欢迎大佬指正