vue视频播放vue-video-player

日记本

作者：lesdom
链接：https://www.jianshu.com/p/23b03e11d902
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

有修改，我把我自己写的代码粘贴到上面了，只是为了我自己以后看明白 哈哈，转载的内容只是转载，方便以后查看

安装

npm install vue-video-player -S

配置

main.js

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')

Vue.use(VideoPlayer)

使用 编写组件

<template>
    <!--    <video-->
    <!--        ref="videoPlayBackPlugin"-->
    <!--        class="video-js vjs-default-skin w-100 h-100"-->
    <!--    >-->
    <!--        <source ref="videoPlayBackPluginSource" />-->
    <!--    </video>-->
    <!--        class="video-player vjs-custom-skin"-->
    <video-player
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
        style="width: 100%;height: 100%"
    />
</template>
<script>
export default {
    props: ["videoItem"],
    data() {
        return {
            // 视频播放
            playerOptions: {}
        };
    },
    computed: {
        player() {
            return this.$refs.videoPlayer.player;
        }
    },
    mounted() {
        this.playerOptions = this.videoItem;
    },
    methods: {
        onPlayerPause() {
            this.$refs.videoPlayer.dispose(); //关闭弹窗视频暂停方法
        }
    }
};
</script>
<style lang="scss">
.video-js {
    .vjs-big-play-button {
        /*top: 50%;*/
        /*left: 50%;*/
        transform: translate(-50%, -50%);
    }
}
</style>

引用组件重新赋值视频地址

<!--            视频dialog-->
        <el-dialog
            :title="videoItem.title + '操作详解'"
            :visible.sync="videodialog"
            v-dialog-drag
            :before-close="handleClick"
        >
            <videoPlayer
                class="view"
                ref="video"
                :videoItem="videoItem"
                :key="DataTimes"
            />
        </el-dialog>


//引用组件
import videoPlayer from "@/components/VideoPlayer/index";
components: { videoPlayer },

videoItem: {}, //视频组件传值所用 在data中

//this.playerOptions['sources'][0]['src'] = '接口地址';
//赋值
let vList = [
                {
                    description: "系统演示视频.mp4",
                    value: "video/",
                    
                }
            ];
            for (let i in vList) {
                let ar = [];
                ar = vList[i].description.split(".");
                this.$set(this.videoList, i, {
                    sources: [
                        {
                            src: "/assets/系统演示视频.mp4"
                            //  vList[i].value +
                            //  vList[i].description,
                            // type: "video/mp4"
                        }
                    ],
                    notSupportedMessage: "此视频暂无法播放，请稍后再试",
                    controls: true,
                    preload: "auto",
                    poster: "",
                    title: ar[0]
                });
            }


//关闭视频方法
        handleClick() {
            this.$refs.video.onPlayerPause();
            this.videodialog = false;
        },

//演示视频的格式样式
<div class="yanShiShiPin">
                <div v-for="(item, index) in videoList" :key="index">
                    <div class="videoitem" @click="videoImgCli(item)">
                        <div class="itemtext2">
                            <div class="h-50">{{ item.title }}</div>
                            <div class="h-50">操作详解</div>
                        </div>
                    </div>
                    <div class="video_bottom_title">{{ item.title }}操作详解</div>
                </div>
            </div>

//视频点击
        videoImgCli(data) {
            this.DataTimes = Date.now();
            this.videoItem = data;
            this.videodialog = true;
        },

.yanShiShiPin {
            padding-top: 10px;
            padding-bottom: 10px;
            height: calc(100% - 490px);
            display: flex;
            align-items: center;
            justify-content: left;
            .videoitem {
                width: 290px;
                height: 178px;
                margin: 5px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                background: url("/assets/video_back.png");
                .itemtext2 {
                    text-align: justify;
                    text-justify: newspaper;
                    word-break: break-all;
                    color: #ffffff;
                    height: 50px;
                    font-size: 22px;
                    text-align: center;
                }
            }
            .video_bottom_title {
                height: 50px;
                width: 300px;
                text-align: center;
                line-height: 50px;
                font-size: 16px;
            }
        }

样式问题

在某个页面，视频的一些按钮无法显示，而是长方形的边线框。在网上并没有相关的问题，极少数相同的问题也无法解决。

原因： 项目页面上本身的样式影响到了视频的样式。
解决：当你换一个页面，或者将视频独立放在最外面的标签，样式就不会有问题。也就是说，将视频与其他部分独立开，不受其他标签样式的影响。

支持格式

其他格式可能需要额外实现

type: "video/webm",
type: "video/ogg",
type: "video/3gp",
type: "video/mp4",

腾讯视频地址获取方法

1、点击进入视频播放
2、利用快捷键“F12”打开开发人员工具，然后选择“network”栏目，然后选择“media”
3、以上设置完成后我们按一下“F5”键刷新当前页面，这时候开发工具就会抓取页面调用的信息，我们找到最大内存的链接点击右键选择“open link in new tab”打开。

文档

github
segmentfault

网站导航

网站导航