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

网站首页 > 技术文章 正文

基于 vue3 构建 hls.js 播放器组件Vue3VideoPlay

ins518 2024-11-26 03:51:06 技术文章 13 ℃ 0 评论

今天给大家分享一款不错的 vue3.js 开发的支持多种格式的播放器Vue3VideoPlay。

vue3-video-play 适用于 Vue3hls.js 播放器组件 | 并且支持 MP4/WebM/Ogg 格式,配置强大。

安装

npm i vue3-video-play --save

开始使用

import { createApp } from 'vue'
import App from './App.vue'
let app = createApp(App)

import vue3videoPlay from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css' // 引入css
app.use(vue3videoPlay)

app.mount('#app')
<template>
  <div>
    <vue3VideoPlay
      v-bind="options"
      poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
const options = reactive({
  width: "800px", //播放器高度
  height: "450px", //播放器高度
  color: "#409eff", //主题色
  title: "", //视频名称
  src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制
  controlBtns: [
    "audioTrack",
    "quality",
    "speedRate",
    "volume",
    "setting",
    "pip",
    "pageFullScreen",
    "fullScreen",
  ], //显示所有按钮,
});
</script>

<style scoped></style>

功能特性

  • 支持快捷键操作
  • 支持倍速播放设置
  • 支持镜像画面设置
  • 支持关灯模式设置
  • 支持画中画模式播放
  • 支持全屏/网页全屏播放
  • 支持从固定时间开始播放
  • 支持移动端,移动端会自动调用自带视频播放器
  • 支持hls视频流播放,支持直播
  • hls播放支持清晰度切换

vue3-video-play 提供了非常丰富的配置参数。支持原生video所有事件。

如果对vue3播放器感兴趣的可以去看下。

# 文档地址
https://codelife.cc/vue3-video-play/
# 仓库地址
https://github.com/xdlumia/vue3-video-play

Oka,今天的分享就到这里了。

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

欢迎 发表评论:

最近发表
标签列表