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

最新推荐文章于 2024-08-30 20:29:15 发布

2401_84152092

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量118

点赞数 2

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

本文链接：https://blog.csdn.net/2401_84152092/article/details/138874863

版权

程序员专栏收录该内容

197 篇文章 0 订阅

订阅专栏

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,

      remainingTimeDisplay: false,

      //全屏按钮

      fullscreenToggle: true,

    },

    sources: [...this.sources],

  },

}

}




使用：src/views/demo/video.vue

<p>HTML的video标签</p>

<video src="https://www.w3school.com.cn//i/movie.ogg" controls="controls">

  您的浏览器不支持视频播放标签

</video>

<p>vue-vedio-player插件</p>

<video-play :sources="source"></video-play>