vue-video-player集成videojs-contrib-hls实现.m3u8文件播放

// 安装依赖
npm install vue-video-player --save
npm install videojs-contrib-hls --save// 在main.js中全局引入
import VideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css';
import 'vue-video-player/src/custom-theme.css';
import videojs from 'video.js';
window.videojs = videojs;
require('videojs-contrib-hls/dist/videojs-contrib-hls.js');Vue.use(VideoPlayer);//组件中使用
<template><md-card><md-card-actions><div class="md-subhead"><span>HLS Live / 直播</span></div><md-button class="md-icon-button"target="_blank"href="https://github.com/surmon-china/vue-video-player/tree/master/examples/04-video.vue"><md-icon>code</md-icon></md-button></md-card-actions><md-card-media><div class="item"><div class="player"><video-player class="vjs-custom-skin" :options="playerOptions" @ready="playerReadied"></video-player></div></div></md-card-media></md-card>
</template><script>export default {data() {return {playerOptions: {// videojs and plugin optionsheight: '360',sources: [{withCredentials: false,type: "application/x-mpegURL",src: "path-to/playlist.m3u8"}],controlBar: {timeDivider: false,durationDisplay: false},flash: { hls: { withCredentials: false }},html5: { hls: { withCredentials: false }},poster: "path-to/static/images/surmon-5.jpg"}}},methods: {playerReadied(player) {var hls = player.tech({ IWillNotUseThisInPlugins: true }).hlsplayer.tech_.hls.xhr.beforeRequest = function(options) {// console.log(options)return options}}}}
</script>

转载于:https://www.cnblogs.com/ImaY/p/9040162.html

vue-video-player集成videojs-contrib-hls实现.m3u8文件播放相关推荐

【Vue前端】使用 videojs 做 hls 直播流遇到的问题及解决方案总结（销毁、反复加载视频流、http-flv 低延时优化解决方向）
由于在自己的工作和学习过程中,只查看某个大佬的教程或文章无法满足自己的学习需求和解决遇到的问题,所以自己在追赶大佬们步伐的基础上,又自己总结.整理.汇总了一些资料,方便自己理解和后续回顾,同时也希望给 ...
Elmedia Video Player Pro 7.15 中文版强大的mac视频播放器
Elmedia Video Player 是Mac毒搜集到的一款 Mac 多媒体播放器. 它可以播放几乎任何音视频文件类型,无论是 AVI,MP4,FLV,SWF, WMV,MKV,MP3,M4V 等 ...
Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)
场景 Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览: Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览_BADAO_LIUMANG_QIZHI的博客-CSDN博客 ...
Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
文章目录 1. Vue+Video.js播放效果图 2. npm安装和引入 3. vue 使用 4. 动态设置video视频的src地址 5. Uncaught (in promise) TypeEr ...
vue video播放m3u8源
1,采坑记录表现:使用videojs-contrib-hls在develop环境可以正常播放,但在product环境无法播放. 原因:videojs-contrib-hls组件打包时有无法解析的语法 ...
视频列表html页面,vue + video.js实现视频列表页（多个视频）
vue + video.js实现视频列表页 vue项目中做一个视频列表页,本来用原生video标签来实现,由于考虑到手机浏览器兼容问题,找了很多插件,最后决定用video.js这个插件来实现.Vide ...
vue video播放器
1.npm安装 video npm install vue-video-player --save 2.main.js全局引入 import VideoPlayer from 'vue-video-p ...
html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...
专业音视频播放器：Elmedia Video Player Pro mac中文版
为大家推荐一款超级好用的苹果专用视频播放器,Elmedia Video Player Pro for Mac几乎支持所有的音视频格式,具备修改播放.流式传输.画中画.流传输视频到其他设备.彩色主题.观 ...

vue-video-player集成videojs-contrib-hls实现.m3u8文件播放

vue-video-player集成videojs-contrib-hls实现.m3u8文件播放相关推荐

最新文章

热门文章