vue 组件全局封装_封装一个vue视频播放器组件

最新推荐文章于 2024-07-31 10:09:32 发布

马达加斯加的大鹅

最新推荐文章于 2024-07-31 10:09:32 发布

阅读量1k

点赞数

文章标签： vue 组件全局封装

本文链接：https://blog.csdn.net/weixin_42474537/article/details/112218020

版权

现在，在网页上播放视频已经越来越流行，但是网上的资料鱼龙混杂，很难找到自己想要的，今天小编就自己的亲身开发体验，手把手从零开始---封装一个vue视频播放器组件。

❝
作为一个老道的前端搬砖师，怎么可能会一心闭门造车呢？还是先去网上找找轮子吧
❞

经过在网上不断的查阅之后，我最终选择了video.js这个轮子，作为我的播放器。好，现在轮子找好了，乍一看，天，好像有点丑。不着急，我再来把它美化美化(二次封装)。

引入video.js

安装

//安装video.js插件
npm install video.js -S 

//如果需要播放rtmp直播流，需安装一下插件
npm install videojs-flash -S

在组件中简单使用插件

template

`script`

import videojs from "video.js";
//播放器中文，不能使用.js文件
import videozhCN from "video.js/dist/lang/zh-CN.json";
//样式文件注意要加上
import "video.js/dist/video-js.css"; 
//如果要播放RTMP要使用flash 需要先npm i videojs-flash
import "videojs-flash";
export default {
      
    data() {
      
        return {
      
          player: null,
        };
    },
    //初始化播放器
    mounted(){
      
        let options = {
      
            autoplay: true, //自动播放
            language: "zh-CN",
            controls: this.controls, //控制条
            preload: "auto", //自动加载
            errorDisplay: true, //错误展示
            // fluid: true, //跟随外层容器变化大小，跟随的是外层宽度
            width: "500px",
            height: "500px",
            // controlBar: false,  // 设为false不渲染控制条DOM元素，只设置controls为false虽然不展示，但是存在
            // textTrackDisplay: false,  // 不渲染字幕相关DOM
            userActions: {
      
              hotkeys: true //是否支持热键
            },
            notSupportedMessage: "此视频暂无法播放，请稍后再试",
            techOrder: ["h5","flash"],//定义Video.js技术首选的顺序
            sources: [
              {
      
                src: '视频或者直播地址',
                type: 'video/mp4',
                //type: 'rtmp/flv',
              }
            ]
        };
        this.player = videojs(
            this.$refs.videoNode,
            options,
            function onPlayerReady() {
      
              videojs.log(`Your player is ready!`);
            }
        );
        videojs.addLanguage("zh-CN", videozhCN);
    },
    beforeDestroy() {
      
        if (this.player) {
      
          this.player.dispose();
        }
    }
}

这样一个简单的视频播放功能就实现了。这里小编也给大家整理了一些video.js常用的配置项：

`常用选项`

autoplay：true/false 播放器准备好之后，是否自动播放 【默认false】controls：true/false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮height: 视频容器的高度，字符串或数字 单位像素 比如：height:300 or height:‘300px‘width: 视频容器的宽度, 字符串或数字 单位像素loop : true/false 视频播放结束后，是否循环播放muted : true/false 是否静音poster: 播放前显示的视频画面，播放开始之后自动移除。通常传入一个URLpreload:预加载 ‘auto‘ 自动、、’metadata‘ 元数据信息，比如视频长度，尺寸等、‘none‘ 不预加载任何数据，直到用户开始播放才开始下载