1，安装依赖包

npm install --save xgplayer

npm install --save xgplayer-hls

2，贴代码吧

<template><div><div id='mse'></div></div>
</template><script>
import HlsJsPlayer from "xgplayer-hls"export default {data(){return{video:''}},mounted(){this.initPlayer()},methods:{initPlayer() {this.video = new HlsJsPlayer({id: 'mse',url: '你的m3u8视频链接',lastPlayTime: 0,// lastPlayTime: 20, //视频起播时间（单位：秒）lastPlayTimeHideDelay: 3, // 提示文字展示时长（单位：秒）playbackRate: [0.5, 0.75, 1, 1.25, 1.5, 2], // 传入倍速可选数组controlPlugins: [],autoplay: true,volume: 20,autoplayMuted: false, // 这个配置，导致不自动播放，需要用户点击width: 790,height: 446,// closeInactive: true,definitionActive: 'click',errorTips: `这里是错误提示，可以写行内样式`,loop: false})},}
}
</script><style></style>

注意，m3u8格式是只能用一次，再次使用链接会失效，可以重新获取一下m3u8的链接

Vue中video播放m3u8视频相关推荐

vue使用vue-dplayer播放m3u8视频
文章目录前言一.安装插件二.使用步骤 1.main.js全局引入 2.页面引入 3.属性配置前言后台提供了一个视频播放路径,为切片完的m3u8类型的,在前端播放,网上参照了几个教程,这里总结 ...
m3u8.php怎么调用,怎样使用Vue结合Video.js播放m3u8视频
这次给大家带来怎样使用Vue结合Video.js播放m3u8视频,使用Vue结合Video.js播放m3u8视频的注意事项有哪些,下面就是实战案例,一起来看一下. 首先,我们需要在vue工程中安装vi ...
android 3.0 m3u8,在Android中播放m3u8视频
我想直播视频,并且它采用m3u8格式.所以,我想下面的代码在Android中播放m3u8视频 public class StreamingPlayer extends Activity impleme ...
video.js播放m3u8视频
m3u8 是一种基于HTTP Live Streaming(HLS)文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成.目前由 Apple.inc 率先提出的 HLS 协议在 ...
vue 使用video加载视频进行展示，视频循环自动播放
vue 使用video加载视频进行展示,视频循环自动播放loop autoplay <span v-else-if="item.prop === 'alarmVedio'"& ...
video.js兼容微信浏览器，（播放.m3u8视频源）解决微信浏览器黑屏问题
video.js兼容微信浏览器,(播放.m3u8视频源)解决微信浏览器黑屏问题一.问题描述: 在h5做根据视频源直播功能时,在浏览器能打开视频,但是在部分安卓机和苹果机在微信浏览器打开会出现黑屏的状 ...
Hls.js播放m3u8视频 DPlayer视频播放器（easypan） MSE简介
文章目录学习链接 hls.js播放m3u8视频效果代码前端代码安装hls.js App.vue 后台代码准备文件 mp4文件切片java实现 TsController TsService ...
360极速浏览器不能添加hls插件，怎样播放m3u8视频？
谷歌和火狐浏览器都可以在扩展程序添加Native HLS Playback插件播放m3u8视频,但是360搜了一下没有类似的插件. 那怎么办呢,有个好办法就是大家可以简单粗暴直接换成Chrome浏览器 ...
怎么播放m3u8视频
为了播放 m3u8 视频,你需要有一个支持 m3u8 格式的视频播放器.常用的视频播放器有 VLC.Potplayer 等. 你需要在这些视频播放器中打开 m3u8 文件,即可播放视频. 你也可以使用 ...

Vue中video播放m3u8视频

1，安装依赖包

2，贴代码吧

Vue中video播放m3u8视频相关推荐

最新文章

热门文章