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

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

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

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

e3bbd5be0f442c1c9f8a9e47042c96d2.png

引入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‘ 不预加载任何数据,直到用户开始播放才开始下载
Video.js特定的选项

除非另有说明,否则默认情况下每个选项undefined

aspectRatio

类型:string

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值