专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

超精致 Vue 视频播放组件Vue-CoreVideoPlayer

ins518 2024-11-26 03:50:41 技术文章 11 ℃ 0 评论

今天给小伙伴们推荐一款功能超赞的vue.js视频播放器组件VueCoreVideoPlayer。

vue-core-video-player 一个基于Vue超轻量级的视频播放器组件。采用 Adobd XD 进行UI设计,支持移动端适配。

特性

  • 个性化UI配置
  • i18n
  • 服务端渲染
  • 画中画模式
  • 事件订阅
  • 易于开发
  • 支持移动端适配

安装

$ npm i vue-core-video-player -S

使用插件

<template>
  <div class="player-container">
    <vue-core-video-player 
      src="/assets/xxx.mp4"
      @loadedmetadata="loaded" 
      @play="playFunc" 
      @pause="pauseFunc"
      @error="errorHandle"
    >
    </vue-core-video-player>
  </div>
<template>

<script>
import VueCoreVideoPlayer from 'vue-core-video-player'
export default {
  methods: {
    loaded () {
      // ...
    },
    playFunc () {
      // ...
    },
    pauseFunc () {
      // ...
    },
    errorHandle (e) {
      // ...
    },
  }
}
</script>

支持设置多分辨率视频,默认的分辨率是 '720p',通过 resolution 这个属性来设置。

const videoSource = [
  {
    src: 'assets/xxx.mp4',
    resolution: 360,
  }, {
    src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4',
    resolution: 720,
  }, {
    src: 'https://media.vued.vanthink.cn/y2mate.com%20-%20sparkle_your_name_amv_K_7To_y9IAM_1080p.mp4',
    resolution: 1080
  }
]

附上示例演示及仓库地址

# 文档说明
https://core-player.github.io/vue-core-video-player/

# 示例地址
https://events.jackpu.com/vue-core-video-player-examples/

# github地址
https://github.com/core-player/vue-core-video-player

ok,今天就分享到这里。希望能对你有些帮助!如果大家有其他Vue播放组件,欢迎留言讨论哈~~

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表