videojs在vue中的使用（自定义组件，如清晰度）

videojs依赖安装

npm install video.js --save

import "video.js/dist/video-js.css";
import video_zhCN from "video.js/dist/lang/zh-CN.json";
import videoJS from "video.js";
videoJS.addLanguage("zh-CN", video_zhCN); //设置播放器的语言

videojs初始化

1、html结构

<div class="player-wrap" id="vWrap">
    <video id="videoJS_1" class="video-js vjs-big-play-centered"></video>
</div>

2、通过js的方式进行初始化

    /**
     * 播放器初始化
     */
    initVideoJS(videoId = "videoJS_1") {
      let vm = this;
      try {
        let video = document.getElementById(videoId);
        let options = {
          controls: true, //是否显示播放器控件
          autoplay: true, //是否自动播放
          width: 864, //视频的宽度
          height: 486,//视频的高度
          aspectRatio: "16:9", //视频的宽高比
          poster: this.currentVideo.bigthumbnailURL, //视频的封面
          controlBar: { //底部的控制栏组件
            currentTimeDisplay: true, //当前播放事件
            timeDivider: true, //当前播放时间与总时间的斜杆分隔符
            durationDisplay: true, //是否显示总时间
            remainingTimeDisplay: false, //是否显示剩下的时间，该选项与是否显示总时间二选一
            volumePanel: { //音量组件
              inline: true //可以调整方向为纵向或者横向
            },
            children: [ //children数组这是controlbar的子元素顺序
              {
                name: "playToggle"
              },
              {
                name: "volumePanel"
              },
              {
                name: "currentTimeDisplay"
              },
              {
                name: "progressControl"
              },
              {
                name: "durationDisplay"
              },
              {
                 name: "playbackRateMenuButton",
                playbackRates: [0.5, 1, 1.5, 2]
               },
              {
                name: "FullscreenToggle"
              }
            ]
          },
          sources: [ // 设置视频的播放源
            {
              src: this.qualityArray[0].url,
              type: `video/mp4`, //注意有些类型不兼容如：video/mov
              poster: this.currentVideo.bigthumbnailURL //视频封面
            }
          ]
        };
        this.vPlayer = videoJS(video, options, function() {
          this.on("error", () => {
            //视频错误监听事件
          });
          this.on("loadstart", () => {
            //视频开始加载数据监听事件
          });
          this.on("canplaythrough", () => {
            //视频可以播放监听事件
          });
          this.on("playing", () => {
          //  视频正在播放监听事件
          });
          this.on("stalled", () => {
            console.log("网络异常");
          });
          this.on("waiting", () => {
            //视频正在加载事件
          });
        });
        /***
         * 添加视频清晰度
        ****/
        const controlBar = this.vPlayer.getChild("ControlBar") || null;
        const qualityButton = new QualityMenuButton(this.vPlayer, {
          qualitys: vm.qualitys, //传入视频的画质信息
          defaultQuality: vm.qualitys[0] //传入视频的默认画质
        });
        if (controlBar) {
          controlBar.addChild(
            qualityButton,
            {},
            controlBar.children().length - 2
          );
        }
      } catch (err) {
        console.log(`initVideoJs Player error => ${err}`);
      }
    },

切换视频

1、在原来的video元素基础上进行切换

该方式使用以创建好的video标签，只是简单的改变video的src。注意，此时的自定义组件（如清晰度）并没有更新，里面的数据还是上一个视频的信息，需要手动更新，可以手动移除后再添加。

    /**
     * video.js切换视频
     */
    switchVideo(url, seekTime = 0, qualityNname) {
      let vm = this;
      // 注意这里的id为页面渲染出来的video标签的id，可在控制台审查元素进行查看
      let $video = document.getElementById(
        `videoJS_${this.videoIndex}_html5_api`
      );
      //设置视频封面
        this.vPlayer.posterImage.setSrc(
          this.currentVideo.bigthumbnailURL || this.currentVideo.thumbnailURL
        );
      // 设置视频的src
      $video.setAttribute("src", url);
      this.vPlayer.load();
      this.vPlayer.play();
    },

2、创建新的video元素切换视频

该方式首先会调用dispose方法销毁已经创建的video标签，并移除所有的组件和监听事件，然后需要自己创建video并设置其id（注意该id不能与之前销毁的id相同，我也不知道为啥～ :) ）和class以及src，然后将创建的video添加到文档中，如上html的结构，将作为id= vWrap的子元素添加到文档中。

createdVideoPlayer() {
      let vm = this;
      if (this.vPlayer) {
        this.vPlayer.dispose();
      }
      this.videoIndex++; //每次创建的video中id不能和之前销毁的一样
      let videowrap = document.getElementById("vWrap");
      let videoTag =
        document.getElementsByTagName("video")[0] ||
        document.createElement("video");
      videoTag.id = `videoJS_${this.videoIndex}`;
      videoTag.autoplay = true;
      videoTag.src = this.qualityArray[0].url;
      videoTag.className += " video-js vjs-big-play-centered";
      videowrap.appendChild(videoTag);
      let options = {
        controls: true,
        autoplay: true,
        width: 864,
        height: 486,
        aspectRatio: "16:9",
        poster: this.currentVideo.bigthumbnailURL, 
        controlBar: {
          currentTimeDisplay: true,
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          volumePanel: {
            inline: true
          },
          children: [
            {
              name: "playToggle"
            },
            {
              name: "volumePanel"
            },
            {
              name: "currentTimeDisplay"
            },
            {
              name: "progressControl"
            },
            {
              name: "durationDisplay"
            },
            {
               name: "playbackRateMenuButton",
               playbackRates: [0.5, 1, 1.5, 2]
            },
            {
              name: "QualitySelectorBar"
            },
            {
              name: "FullscreenToggle"
            }
          ]
        },
        sources: [
          {
            src: this.qualityArray[0].url,
            type: `video/mp4`,
            poster: this.currentVideo.bigthumbnailURL
          }
        ]
      };
      this.vPlayer = videoJS(
        document.getElementById(`videoJS_${this.videoIndex}`),
        options,
        function() {
          this.on("error", () => {
            console.log("视频播放失败");
          });
          this.on("loadstart", () => {
          });
          this.on("playing", () => {
          });
          this.on("stalled", () => {
            console.log("网络异常");
          });
          this.on("loadstart", () => {
          });
          this.on("waiting", () => {
          });
          this.on("playing", () => {
          });
        }
      );
    }

videojs自定义组件

1、视频清晰度切换组件（仿照官方的倍速切换组件实现）

清晰度菜单

// QualityMenuItem.js
import videoJS from "video.js";
import TipPanel from "./TipPanel";
class QualityMenuItem extends videoJS.getComponent("MenuItem") {
  constructor(player, options) {
    const label = options.quality.name;
    const defaultLabel = options.defalutQuality.name;
    options.multiSelectable = false;
    options.label = label;
    options.selected = label === defaultLabel;
    // options.selectable = true; //使得菜单可以选中，主要是显示选中时的状态，由于选中后在选其他导致点击过的都显示选中状态（options.multiSelectable = false 不生效？），因此，我在项目中不开启～
    super(player, options);
    this.label = label;
    this.defaultLabel = defaultLabel;
    this.defalutQuality = options.defalutQuality;
    this.qualityUrl = options.quality.url || "";
    this.videoJSId = this.options_.videoJSId;
    this.tipBar = new TipPanel();
    this.on("loadedmetadata", this.updateLabel);
  }
  handleClick() {
    super.handleClick();
    this.changeVideoQuality();
  }
  changeVideoQuality() {
    let vm = this;
    // 这里应该是更新显示的清晰度标签，但是没用～ ：（
    // super.options_.label = this.options_.label;
    // 选中该清晰度
    // this.showLabel = this.options_.label;
    // 更新显示的清晰度
    if (document.querySelector(".vjs-quality-value").innerHTML === this.label) {
      return; //点击当前清晰度则不执行
    }
    // 点击后不知道怎么更新显示的清晰度标签，因此我直接更新dom （原谅我太菜了～）
    document.querySelector(
      ".vjs-quality-value"
    ).innerHTML = this.options_.label;
    this.selected(
      this.label === document.querySelector(".vjs-quality-value").innerHTML
    );
    let player = this.player();
    let seekTime = player.currentTime();
    let $video = document.getElementById(`${this.videoJSId}_html5_api`);
    player.addChild(this.tipBar);
    this.tipBar.notice(`正在切换至 ${this.label} 画质`);
    // 切换清晰度,隐藏视频封面
    player.posterImage.setSrc("");
    $video.setAttribute("src", this.qualityUrl);
    player.load();
    player.currentTime(seekTime);
    player.on("loadedmetadata", function() {
      player.play();
      player.currentTime(seekTime);
      vm.tipBar.notice(`已经切换至 ${vm.label} 画质`);
      vm.tipBar.hideNotice(); //默认2s移除提示信息
    });
  }
  updateLabel() {
    // this.selected(this.label === this.defaultLabel);
  }
}
QualityMenuItem.prototype.contentElType = "button";
export default QualityMenuItem;

总结

一开始在项目中使用dplayer做为视频的播放库，但是由于在孤儿浏览器上出现兼容问题 🙃，因此不得不放弃转为videojs，一路走来，踩了不少抗，主要是视频切换和自定义组件在切换视频时出的问题（样式的修改可以通过css覆盖生成的样式），这篇文章谨献给自己在这里所掉的头～😭

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,324评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,303评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,192评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,555评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,569评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,566评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,927评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,583评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,827评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,365评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,941评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2赞 342