当前位置:首页 » 《关注互联网》 » 正文

Vue3 实现播放m3u8视频的两种方式

19 人参与  2024年10月26日 10:40  分类 : 《关注互联网》  评论

点击全文阅读


第一种:vue3-video-play

1、安装方式

(1)npm安装方式
 npm install vue3-video-play --save
(2)yarn安装方式
 yarn add vue3-video-play --save

2、页面引入

import 'vue3-video-play/dist/style.css';import VideoPlay from 'vue3-video-play';

3、示例代码

<template><VideoPlay v-bind="options" width="100%" height="650px"/></template><script setup lang="ts">import { reactive } from 'vue';import 'vue3-video-play/dist/style.css';import VideoPlay from 'vue3-video-play';// 视频配置项const options = reactive({   src: '', //视频源   muted: false, //静音 自动播放会自己静音   webFullScreen: false,   speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速   autoPlay: true, //自动播放   loop: false, //循环播放   mirror: false, //镜像画面   ligthOff: false, //关灯模式   volume: 0.3, //默认音量大小   control: true, //是否显示控制器   poster: '',   type: 'm3u8',});// 调用接口getVideo()// 模拟接口获取视频源async function getVideo() {   const res = await getVideoInfo();   options.src = res.data;}</script><style scoped></style>

​vue3-video-play 支持video原生所有Attributes video原生属性 使用方式和props属性使用一致

名称说明类型可选值默认值
width播放器宽度string-800px
height播放器高度string-450px
color播放器主色调string-#409eff

4、效果图

在这里插入图片描述

第二种:chimee-player 官方文档

1、引入依赖

npm install chimee-player --save

2、示例代码

<template><div id="wrapper"></div></template><script setup lang="ts">import { reactive } from 'vue';import ChimeePlayer from 'chimee-player';// 调用接口getVideo()// 模拟接口获取视频源async function getVideo() {   const res = await getVideoInfo();   new ChimeePlayer ({      wrapper: '#wrapper', // video dom容器      src: res.data,      box: 'hls', // 视频编码flv、native和hls      isLive: false, // 类型      autoplay: true, // 自动播放      controls: false, // 控制器      muted: true // 静音  });}</script><style scoped></style>

点击全文阅读


本文链接:http://zhangshiyu.com/post/177865.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 她的记忆停留在了最爱初恋的那年许欣柔楚临川完本_她的记忆停留在了最爱初恋的那年(许欣柔楚临川)
  • 全书浏览假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)_假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)全书结局
  • 童养夫让我给他的新欢出修复费(林嘉芝林思雅)_童养夫让我给他的新欢出修复费林嘉芝林思雅
  • 全文资助生女婿让我给他白月光付三千万月子中心钱(宋清玉宋雅)列表_全文资助生女婿让我给他白月光付三千万月子中心钱
  • 碎在时光里的谎言喻景宴秦明月完本_碎在时光里的谎言(喻景宴秦明月)
  • 旧爱剜心吻成灰席鄢之岑秋全书免费旧爱剜心吻成灰席鄢之岑秋全书免费
  • 结婚六年丈夫不碰我谁知儿子亲爹是寡头(纪清言傅司砚),结婚六年丈夫不碰我谁知儿子亲爹是寡头
  • 老公想换掉我的男胎,我笑他自不量力(宋薇于继业)_老公想换掉我的男胎,我笑他自不量力宋薇于继业
  • 给太子下了噬心蛊后,皇后找上门(小夭赵劼)全书浏览_给太子下了噬心蛊后,皇后找上门全书浏览
  • 豪门绝嗣!带球跑的夫人回来了!(谢长宴慕清杳)_豪门绝嗣!带球跑的夫人回来了!谢长宴慕清杳
  • 完美身材(李朵林之晴)_完美身材李朵林之晴
  • 离婚后,我和快穿系统绑定(白意秋陈荣周立慧)_离婚后,我和快穿系统绑定(白意秋陈荣周立慧)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1