vue-video-player, реализовать эффект полноэкранного переключения с помощью пользовательского компонента кнопки

внешний интерфейс Ресурсы изображений Icon Vue.js

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

Vue используется для разработки продукта, который представил коллегаvue-video-playerПлагин воспроизведения видео, черезdemoЧехол быстро реализовал эффект воспроизведения видео

<video-player
    class="vjs-custom-skin"
    ref="videoPlayer1"
    :options="playerOptions"
    :playsinline="true"
    :events="events"
    @play="onPlayerPlay($event)"
    @pause="onPlayerPause($event)"
    @ended="onPlayerEnded($event)"
    @loadeddata="onPlayerLoadeddata($event)"
    @waiting="onPlayerWaiting($event)"
    @playing="onPlayerPlaying($event)"
    @timeupdate="onPlayerTimeupdate($event)"
    @canplay="onPlayerCanplay($event)"
    @canplaythrough="onPlayerCanplaythrough($event)"
    @ready="playerReadied"
    @statechanged="playerStateChanged($event)">
</video-player>

Прочитав его, начальник сказал: «Не нужно переключаться на полный экран, и не нужно, чтобы пользователь так внимательно смотрел»,

через элементы конфигурацииcontrolBar: {fullscreenToggle: false},После выключения полноэкранного переключателя, поскольку видео является SD, а размер области отображения составляет 483 x 303 пикселей, содержимое видео вообще не может быть четко видно. Босс сказал: «Полный экран не заполняет весь экран. , но отображается через всплывающий слой фиксированного размера».

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

<video-player
    ...
    :events="events"
    @fullscreenchange="onPlayerFullScreenchange($event)"
    ...
>
</video-player>

// 需要在 events 中指定全屏切换事件，不然无法监听
data () {
    return {
        videoDialogVisible: false, // 控制弹出层
        events: ['fullscreenchange']
    }
},
methods: {
    ...
    onPlayerFullScreenchange (player) {
        player.exitFullscreen()  //强制退出全屏，恢复正常大小
        this.videoDialogVisible = true
    }
    ...
}

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

Ни в коем случае, продолжайте думать о том, как в репозитории плагинов GitHub некоторые пользователи сети упомянули связанныеissues, пройти черезЗарегистрируйте компонент пользовательской кнопки, добавьте его на панель управления проигрывателя и замените полноэкранный переключатель по умолчанию.

import * as videojs from 'video.js'

export default {
    ...
    methods: {
        ...
        createMyButton () {
            let Button = videojs.getComponent('Button')
            let myButton = videojs.extend(Button, {
                constructor: function (player, options) {
                    Button.apply(this, arguments)
                    this.addClass('fullscreen-enter')
                },
                handleClick: () => {
                    // 绑定点击事件
                },
                buildCSSClass: function () {
                  return 'vjs-icon-custombutton vjs-control vjs-button'
                }
            })
            
            //注册
            videojs.registerComponent('myButton', myButton)
            
            this.$nextTick(() => {
                // 添加到controlBar中
                this.$refs.videoPlayer1.player.getChild('controlBar').addChild('myButton')
            })
        }
        ...
    }
}

// 在 style 中指定自定义按钮样式
<style>
.video-js{
      .vjs-control-bar{
        .vjs-icon-custombutton {
          font-family: VideoJS;
          font-weight: normal;
          font-style: normal; }
          .vjs-icon-custombutton:before {
            content: "\f108";
            font-size: 1.8em;
            line-height: 1.67;
          }
      }
    }
}
</style>

Значок пользовательской кнопки по-прежнему используется по умолчанию.полноэкранный значок, а затем реализовать событие нажатия кнопки

На странице и во всплывающем слое есть два экземпляра проигрывателя videoPlayer1 и videoPlayer2 соответственно.Что необходимо учитывать, так это то, что при запуске пользовательского события переключения синхронизация двух проигрывателей (videoPlayer1 воспроизводится в течение 10 секунд, после перехода в полноэкранный режим videoPlayer2 должен продолжать воспроизведение с 10 секунд, а не начинать с начала )

onCustombuttonClick () {
    let _time = this.$refs.videoPlayer1.player.currentTime() //已播放时长
    this.$refs.videoPlayer2.player.currentTime(_time)
    this.$refs.videoPlayer2.player.play()
}

Аналогично: после закрытия всплывающего слоя продолжительность воспроизведения videoPlayer2 также должна быть назначена на videoPlayer1, что достигается мониторингом отображения всплывающего слоя, скрытия и других событий.

Категории