Some events cannot be triggered,like volumechange ratechange

huangyangteng commented 2 years ago

Describe the bug

我查看了事件的文档(文档地址)，发现很多videojs的事件是支持的，但是我为组件绑定了volumechange和ratechange事件但是回调函数没有触发，经过测试，只有以下事件会被触发

  // as of videojs 6.6.0
  const DEFAULT_EVENTS = [
    'loadeddata',
    'canplay',
    'canplaythrough',
    'play',
    'pause',
    'waiting',
    'playing',
    'ended',
    'error'
  ]

Reproduction

<template>
    <section>
        <video-player
            @play="onPlay"
            @volumechange="volumeChange"
            @error="onError"
            @ratechange="onRate"
            :options="options"
        ></video-player>
    </section>
</template>

<script>
import { videoPlayer } from 'vue-video-player'
import videojs from 'video.js'
window.videojs = videojs
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
require('videojs-contrib-hls/dist/videojs-contrib-hls.js')
export default {
    name: 'test-video-player',
    components: {
        videoPlayer
    },
    data() {
        return {
            options: {
                autoplay: false,
                height: '720',
                playbackRates: [0.7, 1.0, 1.25, 1.5, 2.0],
                sources: [
                    {
                        withCredentials: false,
                        src: 'https://leexiao.site/file/1.mp4'
                    }
                ]
            }
        }
    },
    methods: {
        onRate() {
            console.log('on rate')
        },
        volumeChange() {
            console.log('volume change')
        },
        onPlay() {
            console.log('play')
        }
    }
}
</script>

System Info

System:
    OS: macOS 10.15.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 5.04 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.17.5 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.14 - /usr/local/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Firefox: 103.0.1
    Safari: 14.0
  npmPackages:
    @babel/compat-data: ^7.8.0 => 7.15.0 
    @tweenjs/tween.js: ^18.6.4 => 18.6.4 
    @vue/cli-plugin-babel: ^4.2.0 => 4.5.13 
    @vue/cli-plugin-eslint: ^4.2.0 => 4.5.13 
    @vue/cli-plugin-pwa: ^4.5.17 => 4.5.17 
    @vue/cli-plugin-router: ^4.2.0 => 4.5.13 
    @vue/cli-plugin-unit-jest: ^4.2.0 => 4.5.13 
    @vue/cli-plugin-vuex: ^4.2.0 => 4.5.13 
    @vue/cli-service: ^4.2.0 => 4.5.13 
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0 
    @vue/test-utils: 1.0.0-beta.31 => 1.0.0-beta.31 
    @yi-note/text-highlighter: ^1.0.0 => 1.0.0 
    animate.css: ^4.1.0 => 4.1.1 
    axios: ^0.19.2 => 0.19.2 
    babel-eslint: ^10.0.3 => 10.1.0 
    babel-plugin-component: ^1.1.1 => 1.1.1 
    core-js: ^3.6.4 => 3.16.2 
    dayjs: ^1.10.4 => 1.10.6 
    element-ui: ^2.13.0 => 2.15.5 
    eslint: ^6.7.2 => 6.8.0 
    eslint-plugin-prettier: ^3.1.1 => 3.4.0 
    eslint-plugin-vue: ^6.1.2 => 6.2.2 
    hotkeys-js: ^3.8.7 => 3.8.7 
    nprogress: ^0.2.0 => 0.2.0 
    pinyin: ^2.10.2 => 2.10.2 
    prettier: ^1.19.1 => 1.19.1 
    register-service-worker: ^1.7.1 => 1.7.2 
    resize-detector: ^0.3.0 => 0.3.0 
    sass: ^1.49.7 => 1.49.7 
    sass-loader: ^8.0.2 => 8.0.2 
    style-resources-loader: ^1.3.3 => 1.4.1 
    three: ^0.137.5 => 0.137.5 
    videojs-contrib-hls: ^5.15.0 => 5.15.0 
    vue: ^2.6.11 => 2.6.14 
    vue-router: ^3.1.5 => 3.5.2 
    vue-template-compiler: ^2.6.11 => 2.6.14 
    vue-video-player: ^5.0.2 => 5.0.2 
    vuedraggable: ^2.24.3 => 2.24.3 
    vuex: ^3.1.2 => 3.6.2 
    vuex-persistedstate: ^2.7.1 => 2.7.1 
    web-highlighter: ^0.6.0 => 0.6.0

Used Package Manager

npm

Validations

[X] Read the the documentation in detail.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

huangyangteng commented 2 years ago

没有人管管吗，这个bug

surmon-china commented 2 years ago

这是预期行为，不是 BUG。

在 vue-video-player 中，组件并没有绑定全部的 Video.js 事件，而是开放了 events prop 配置，你可以指定任何 Video.js 所具有的内置事件。

文档：https://github.com/surmon-china/videojs-player/tree/vue-video-player#api 重复问题：#142

huangyangteng commented 2 years ago

啊，好的。但是，如果类似的issues一直出现的话，让events包含所有事件是不是更合理的行为呢

surmon-china commented 2 years ago

啊，好的。但是，如果类似的issues一直出现的话，让events包含所有事件是不是更合理的行为呢

“组件处理所有 Video.js 事件” 确实会让组件易用性更好，但有一定滞后性。

目前适用于 Vue2 的 vue-video-player 已不再维护，所以不会再有 feature 更新，如果你想要体验新的设计与播播放器能力，只能升级至 Vue3 并使用 @videojs-player/vue 组件。

surmon-china / videojs-player