vue组件实现全屏倍速视频播放功能

最新推荐文章于 2025-05-29 10:17:05 发布

2401_84152092

最新推荐文章于 2025-05-29 10:17:05 发布

阅读量164

点赞数 2

分类专栏：程序员文章标签： vue.js 音视频前端

本文链接：https://blog.youkuaiyun.com/2401_84152092/article/details/138874863

版权

name: ‘VideoPlay’,

props: {

// 视频资源类型及路径

sources: {

  type: Array,

  required: true,

},

data() {

return {

  playerOptions: {

    //播放速度

    playbackRates: [0.5, 1.0, 1.5, 2.0],

    //如果true,浏览器准备好时开始回放。

    autoplay: false,

    // 默认情况下将会消除任何音频。

    muted: false,

    // 导致视频一结束就重新开始。

    loop: false,

    // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）

    preload: 'auto',

    language: 'zh-CN',

    // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）

    aspectRatio: '16:9',

    // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。

    fluid: true,

    //你的封面地址

    poster: '',

    //允许覆盖Video.js无法播放媒体源时显示的默认信息。

    notSupportedMessage: '此视频暂无法播放，请稍后再试',

    controlBar: {

      timeDivider: true,

      durationDisplay: true