Vue视频流播放器 Vue-Core-Video-Player

最近遇到点需求，领导要求能四宫格、九宫格的视频流播放器，还要能随意切换播放地址，一开始想用Vue-Video-Player解决问题的，但越用越不爽，试试别的~

Vue-Core-Video-Player

注：在多屏的时候会互相干扰（指样式，如播放和暂停的按钮样式，功能不受影响）

简单的配置过后

npm npm install --save vue-core-video-player
yarn yarn add -S vue-core-video-player

配置环境
main.js

import VueCoreVideoPlayer from 'vue-core-video-player'Vue.use(VueCoreVideoPlayer)

直接使用

<div id="app"><div class="player-container"><vue-core-video-player src="./your_video_source.mp4"></vue-core-video-player></div>
</div>

还真不赖

当然，还没配置完，播放视频的话video标签也是能做到的，接下来引入HLS

npm npm install @core-player/playcore-hls --save

<template><div id="app"><div class="player-container"><vue-core-video-player :core="HLSCore" src="your_file.m3u8"></vue-core-video-player></div></div>
</template>
<script>
import VueCoreVideoPlayer from 'vue-core-video-player'
import HLSCore from '@core-player/playcore-hlsVue.use(VueCoreVideoPlayer)export default {name: 'App',data () {return {HLSCore}}
}</script>

特别注意，这些我都是直接从官网复制来的，但是，不够细心是用不了的，踩坑记录

注意红框部分，少了个单引号有没有，真的是，坑我

附上我使用的代码

挺有意思的

Vue视频流播放器 Vue-Core-Video-Player相关推荐

rideo选中 vue_适用于 Vue 的播放器组件Vue-Video-Player操作
如果h5的标签不能满足你的需求,那就用这个组件Vue-Video-Player吧,也许可以覆盖到你的需求. class="video-player vjs-custom-skin" ...
html5播放器迅雷,搜狗浏览器HTML5视频播放器插件(HTML5.Video.Player)
一款搜狗浏览器的HTML5视频播放器插件,安装后可以使用HTML5方式播放优酷.土豆.爱奇艺.搜狐视频.迅雷离线.腾讯视频.56视频等网站的视频,避免使用adobe flash player插件,降低 ...
vue 音乐播放器上一首下一首切换
vue 音乐播放器上一首下一首切换根据自定义属性的值找到元素我是使用监听来实现切换的,将v-for循环列表的index存储在vuex中,点击上一首或下一首改变index的值,在另一个组件中监听i ...
uniapp h5直播拉流的几种方法 flv.js， video.js，阿里播放器sdk，video标签
uniapp h5直播拉流的几种方法 flv.js, video.js, 阿里播放器sdk,video标签前言首先引入资源文件需要创建index.html 模板文件 flv.js video.j ...
专业音视频播放器：Elmedia Video Player Pro mac中文版
为大家推荐一款超级好用的苹果专用视频播放器,Elmedia Video Player Pro for Mac几乎支持所有的音视频格式,具备修改播放.流式传输.画中画.流传输视频到其他设备.彩色主题.观 ...
plex媒体播放器：Plex Media Player for Mac
Plex Media Player for Mac是一款非常不错的plex媒体播放器,具有强大的实时搜索功能,可让您快速找到所需的电影,表演或歌曲,为您提供了美丽的HTPC体验和轻松的桌面媒体播放器体 ...
树莓派全语音控制媒体播放器(Fully Speech-Controlled Media Player)
树莓派全语音控制媒体播放器(Fully Speech-Controlled Media Player) 主要特点: *全程无外设操作,可以在无鼠标键盘显示器等外设的情况下(Headless),完全通过 ...
Vue网易云播放器|Vue音乐播放附带环境部署视频教程
本次项目是对前面的vue知识的综合应用:基于vue实现一个网页版播放器. 主页面这是第二个页面是推荐音乐的模块在这里我们可以查看歌单中的音乐标题还可以自己查看mv 播放视频自由的查看自己喜欢的 ...
Vue - 音频播放器插件（vue-aplayer）
Vue使用音频播放器插件 vue-aplayer vue-aplayer中文文档:https://aplayer.netlify.app/docs/guide/ GitHub文档:https://gi ...

Vue视频流播放器 Vue-Core-Video-Player

Vue视频流播放器 Vue-Core-Video-Player相关推荐

最新文章

热门文章