Практика с нуля --- инкапсулировать компонент vue video player

Vue.js

Теперь воспроизведение видео на веб-страницах становится все более и более популярным, но информация в Интернете неоднозначна, и трудно найти то, что вы хотите.Сегодня Xiaobian начнет с нуля со своим личным опытом разработки --- инкапсулировать компоненты vue video player.

Как можно было работать за закрытыми дверями, будучи старомодным грузчиком кирпичей? Заходим в интернет и ищем колеса.

После постоянных обзоров в Интернете я наконец выбрал колесо video.js в качестве своего плеера. Ну а теперь, когда колеса найдены, на первый взгляд, боже, они кажутся немного некрасивыми. Не волнуйтесь, я снова украшу его (вторичная инкапсуляция).

Импортировать видео.js

Установить 

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

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

Простое использование плагинов в компонентах

template 
<template>
  <div>
    <div data-vjs-player>
      <video ref="videoNode" class="video-js vjs-default-skin">抱歉，您的浏览器不支持</video>
    </div>
</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]
  • управления: true/false, нужно ли иметь панель управления [по умолчанию true], если для нее установлено значение false, ею можно управлять только через API. То есть на интерфейсе не будет кнопок управления.
  • height: высота видеоконтейнера, строка или число в пикселях. Например: height:300 или height:'300px'.
  • ширина: ширина, строка или контейнер пикселей цифрового видео
  • loop : true/false, зацикливать ли видео после воспроизведения видео
  • muted : true/false, отключен ли звук
  • постер: экран видео, отображаемый перед воспроизведением, автоматически исчезает после начала воспроизведения. Обычно URL-адрес передается в
  • предварительная загрузка: автоматическая предварительная загрузка «авто», информация метаданных «метаданные», такая как длина видео, размер и т. д., «нет» не загружает какие-либо данные и не начинает загрузку, пока пользователь не начнет играть
Специальные параметры Video.js

Если не указано иное, каждый параметр по умолчанию не определен.

aspectRatio

тип: строка

Переведите проигрыватель в гибкий режим и используйте это значение при расчете динамического размера проигрывателя. Значение должно представлять собой соотношение — два числа, разделенные двоеточием (например, «16:9» или «4:3»).

autoSetup

Тип: логический

Запрещает проигрывателю запускать autoSetup для медиа-элементов с атрибутом data-setup.

Примечание. Должен быть установлен глобально в тот же момент, когда загрузка исходного кода videojs.options.autoSetup = false начинает действовать.

fluid

Тип: логический

Если установлено значение true, проигрыватель Video.js будет иметь плавный размер. Другими словами, он расширится, чтобы соответствовать своему контейнеру.

Кроме того, эта опция автоматически устанавливается на true, если элемент имеет «VJS-Fluid».

inactivityTimeout

Тип: номер

Video.js представляет пользователя, взаимодействующего с проигрывателем через классы «vjs-user-active» и «vjs-user-inactive» и событие «useractive».

Требуется перед объявлением бездействия пользователя, прежде чем inactivityTimeout определит количество миллисекунд бездействия. Значение 0 означает, что inactivityTimeout отсутствует, и пользователь никогда не считается неактивным.

language

тип: строка, по умолчанию: браузер по умолчанию или 'en'

Код языка, соответствующий одному из языков, доступных в плеере. Это устанавливает исходный язык для игрока, но его всегда можно изменить.

Узнайте больше о языках в Video.js.

languages

Тип: Объект

Настройте языки, доступные в плеере. Ключами этого объекта будут коды языков, а значениями будут объекты с английскими ключами и переведенными значениями.

Узнайте больше о языках в Video.js

ПРИМЕЧАНИЕ. Обычно эта опция не нужна, лучше передать пользовательский язык в videojs.addLanguage() для всех игроков!

nativeControlsForTouch

Тип: логический

Явно установите значения по умолчанию для связанных опций технологии.

notSupportedMessage

тип: строка

Позволяет переопределить сообщение по умолчанию, которое Video.js отображает, когда источник мультимедиа не может быть воспроизведен.

playbackRates

Тип: Массив

Массив чисел строго больше 0, где 1 означает нормальную скорость (100%), 0,5 означает половинную скорость (50%), 2 означает двойную скорость (200%) и т. д. Если указано, элемент управления отображением Video.js (класс vjs-playback-rate) позволяет пользователю выбирать скорость воспроизведения из множества вариантов. Параметры отображаются в указанном порядке снизу вверх.

Например:

videojs('my-player', {
  playbackRates: [0.5, 1, 1.5, 2]
});
sources

Тип: Массив

Набор объектов, отражающих способность собственного элемента иметь ряд дочерних элементов. Это должен быть массив объектов со свойствами src и type. Например:

videojs('my-player', {
  sources: [{
    src: '//path/to/video.mp4',
    type: 'video/mp4'
  }, {
    src: '//path/to/video.webm',
    type: 'video/webm'
  }]
});

Использование элементов будет иметь тот же эффект:

<video ...>
  <source src="//path/to/video.mp4" type="video/mp4">
  <source src="//path/to/video.webm" type="video/webm">
</video>
techCanOverridePoster

Тип: логический

Позволяет техническим специалистам накладывать постер проигрывателя и интегрировать его в жизненный цикл плаката проигрывателя. Это может быть полезно при использовании нескольких техник, каждая из которых должна создавать свой собственный плакат при воспроизведении нового источника.

techOrder

Ввод: массив, по умолчанию: ['html5']

Определяет предпочтительный порядок технологий Video.js. По умолчанию это означает, что Html5 является предпочтительной технологией. Другие зарегистрированные технологии будут добавлены после этой технологии в том порядке, в котором они были зарегистрированы.

nativeVideoTracks

Тип: логический

Можно установить значение false, чтобы отключить встроенную поддержку видеодорожек. Чаще всего используется в videojs-contrib-hls.

nativeControlsForTouch

Тип: логический

Html5 поддерживает только технология. Для этого параметра можно установить значение true, чтобы активировать собственные элементы управления сенсорных устройств.

Украсьте колесо video.js

Кнопка воспроизведения по центру

После использования приведенного выше простого использования мы обнаружим, что страница, которая будет воспроизводиться при воспроизведении видео, выглядит следующим образом:

Кнопка воспроизведения по умолчанию находится в левом верхнем углу, что, по мнению автора, блокирует контент, но это можно изменить в соответствии с параметрами.Нам нужно только добавить класс (vjs-big-play-centered) к видео. ярлык.

<video ref="videoNode" class="video-js vjs-default-skin vjs-big-play-centered"></video>

После добавления эффект следующий:

Улучшение состояния загрузки

Когда video.js воспроизводит видео, происходит загрузка по умолчанию. Здесь я предоставляю способ настройки страницы загрузки в соответствии с моими собственными идеями. Если есть какая-либо ошибка, поправьте меня.

Главная мысль:

Слой div подвешивается поверх проигрывателя для отображения содержимого при пользовательской загрузке, а затем значение переменной используется для управления загрузкой div, а значение переменной обновляется путем отслеживания состояния загрузки видео. для достижения пользовательской загрузки цель страницы.

Основной код:

шаблон Примечание: не полный код, а только код ключа

<div :style="{width:'100%',position:'relative',height:height}">
    <div data-vjs-player style="width:100%">
      <video ref="videoNode" class="video-js vjs-default-skin vjs-big-play-centered">抱歉，您的浏览器不支持</video>
    </div>
    <div
      v-if="loading"
      :style="{width:'100%',height:height,position:'absolute',left:'0px',top:'0px'}"
    >
      <img
        :style="{width:'100%',height:height}"
        src="https://img.zcool.cn/community/0113b1576a43e90000018c1b87042d.gif"
      />
    </div>
</div>

сценарий Примечание: не полный код, а только код ключа

data() {
    return {
      loading: false
    };
 },
 let options = {
    autoplay: false, //自动播放
    .....省略代码
 };
this.player = videojs(
    this.$refs.videoNode,
    options,
    function onPlayerReady() {
      videojs.log(`Your player${self.index} is ready!`);
      _this.loading = true;
      _this.player.play();
      _this.player.one("playing", function() {
        // 监听播放
        // console.log("播放器开始播放");
        _this.loading = false;
      });
    
    }
);

Эффект следующий:

Конечно, вы также можете настроить контент.

Видео РБИ

В повседневной жизни, когда мы смотрим видео, мы часто видим, что на полосе прогресса некоторых видео есть маленькие точки, а затем при наведении на них мыши появляются текстовые подсказки. Можем ли мы добавить эту функцию в наш веб-плеер? Шерстяная ткань? Конечно, это возможно!

Прежде всего, я нашел волну колес, и, наконец, нашел колесо видеоjs-маркеров для реализации этой функции.

Установить videojs-маркеры 
npm i videojs-markers -S
Внедрить videojs-маркеры 
import "videojs-markers";
//引入样式
import "videojs-markers/dist/videojs.markers.css";
Используйте videojs-маркеры 
this.player.markers({
  markerStyle: {
    // 标记点样式
    width: "0.7em",
    height: "0.7em",
    bottom: "-0.20em",
    "border-radius": "50%",
    "background-color": "orange",
    position: "absolute"
  },
  //鼠标移入标记点的提示
  markerTip: {
    display: true,//是否显示
    /*
      用于动态构建标记提示文本的回调函数。
      只需返回一个字符串，参数标记是传递给插件的标记对象
     */
    text: function(marker) {
      return marker.text;
    }
  },
  markers: [
        {
          time: 20,
          text:'点位一'
        },
        {
          time: 40,
          text:'点位二'
        },
        {
          time: 130,
          text:'点位三'
        },
        {
          time: 200,
          text:'点位四'
        }
    ],
});

Эффект следующий:

Компоненты пакета

Основные функции плеера реализованы, поэтому последним шагом является инкапсуляция компонентов. Идея инкапсуляции очень проста: передать некоторые измененные свойства из родительского компонента через свойства.

Общие свойства, которые необходимо инкапсулировать

Примечание. Здесь перечислены только некоторые из них, вы можете добавить или удалить их в зависимости от реальной ситуации.

  • src : адрес видео или прямой трансляции
  • height : рост игрока
  • control : нужно ли отображать панель управления
  • Маркеры: источник данных видео верхних
  • type : тип видео для воспроизведения

Основываясь на этих свойствах, давайте преобразуем наш компонент

template

<template>
  <div :style="{width:'100%',position:'relative',height:height}">
    <div data-vjs-player style="width:100%">
      <video ref="videoNode" class="video-js vjs-default-skin vjs-big-play-centered">抱歉，您的浏览器不支持</video>
    </div>
    <div
      v-if="loading"
      :style="{width:'100%',height:height,position:'absolute',left:'0px',top:'0px'}"
    >
      <img
        :style="{width:'100%',height:height}"
        src="https://img.zcool.cn/community/0113b1576a43e90000018c1b87042d.gif"
      />
    </div>
  </div>
</template>

script

data() {
    return {
      player: null,
      loading: false
    };
},


let options = {
        // autoplay: true, //自动播放
        language: "zh-CN",
        controls: this.controls, //控制条
        preload: "auto", //自动加载
        errorDisplay: true, //错误展示
        // fluid: true, //跟随外层容器变化大小，跟随的是外层宽度
        width: "100%",
        height: this.height,
        // controlBar: false,  // 设为false不渲染控制条DOM元素，只设置controls为false虽然不展示，但还是存在
        // textTrackDisplay: false,  // 不渲染字幕相关DOM
        userActions: {
          hotkeys: true //是否支持热键
        },
        notSupportedMessage: "此视频暂无法播放，请稍后再试",
        techOrder: ["flash"],
        sources: [
          {
            src: this.src,
            type: this.type
          }
        ]
      };
      let _this = this;
      this.player = videojs(
        this.$refs.videoNode,
        options,
        function onPlayerReady() {
          videojs.log(`Your player${self.index} is ready!`);
          _this.loading = true;
          _this.player.play();
          _this.player.one("playing", function() {
            // 监听播放
            // console.log("播放器开始播放");
            _this.loading = false;
          });
        }
      );
      videojs.addLanguage("zh-CN", videozhCN);
      if (this.markers) {
        this.player.markers({
          markerStyle: {
            // 标记样式
            width: "0.7em",
            height: "0.7em",
            bottom: "-0.20em",
            "border-radius": "50%",
            "background-color": "orange",
            position: "absolute"
          },
          markerTip: {
            display: true,
            /*
              用于动态构建标记提示文本的回调函数。
              只需返回一个字符串，参数标记是传递给插件的标记对象
             */
            text: function(marker) {
              return marker.text;
            }
          },
          markers: this.markers,
        });
      }

Динамическое переключение видеопакетов

Во время воспроизведения видео у нас часто возникают такие потребности, как переключение видео, так как же это инкапсулировать? Все очень просто, нужно только следить за изменением src в компоненте.Если src изменится, то перезагрузить видео и воспроизвести видео.Код такой:

watch: {
    src() {
      if (this.player) {
        let _this = this;
        this.loading = true;//重新显示加载状态
        let myPlayer = this.player;
        myPlayer.off("timeupdate");//清空时间
        myPlayer.reset();//重置播放器
        myPlayer.pause();//暂停播放
        myPlayer.src([//重新设置播放源
          {
            src: this.src,
            type: "rtmp/flv"
          }
        ]);
        myPlayer.load(this.src);//重新加载视频
        myPlayer.play();//播放视频
        myPlayer.one("playing", function() {
          // 加载完成，开始播放
          // console.log("播放器开始播放");
          _this.loading = false;//隐藏加载状态
        });
      }
    }
},

Вот такой простой видеоплеер упакован.

Пример использования

После завершения упаковки компонента его использование неизбежно, код выглядит следующим образом:

<template>
  <basic-container>
    <el-row class="video-test">
      <el-col :span="16" class="video-test-left">
        <videoPlayer :controls="true" height="600px" :src="url" type="video/mp4" :markers="markers"/>
      </el-col>
    </el-row>
  </basic-container>
</template>
<script>
import videoPlayer from "@/components/videoPlayer/videoPlayer";
export default {
  components: { videoPlayer },
  data() {
    return {
      url: "http://127.0.0.1/test.mp4",
      markers: [
        {
          time: 20,
          text:'点位一'
        },
        {
          time: 40,
          text:'点位二点位二点位二点位二点位二点位二点位二点位二'
        },
        {
          time: 130,
          text:'点位三点位三点位三点位三点位三点位三'
        },
        {
          time: 200,
          text:'点位四点位四点位四点位四点位四点位四'
        }
      ]
    };
  }
};
</script>
<style lang="scss">
</style>

Ссылаться на:

Подробное объяснение китайской документации videojs https://blog.csdn.net/a0405221/article/details/80923090

Последние хорошие статьи рекомендуют:

1,Самое сильное резюме vue в истории ~ текст длиной 10 000 слов — от этого зависит развитие интервью.

2,С ним ваши проекты будут быстрее ракет

3.Цикл событий Я знаю, что такое макрозадача и микрозадача?

4.Оружие Sharp Coder vscode

5.Сборник интервью перенесет вас на вершину жизни

Наконец, если вы хотите обсудить и изучить внешний интерфейс со мной, вы можете обратить внимание на мою официальную учетную запись, время от времени обновлять галантерейные товары и отвечать в фоновой системе знаний после того, как обратите внимание, и вы можете также получите передовую систему знаний, тщательно подготовленную редактором. Вы также можете присоединиться к технической группе для обмена обсуждениями.

В этой статье используетсяmdniceнабор текста

Категории