vue+video.js实现前端视频流（hls、MP4、flv）

前言

之前、写过关于西瓜播放器xgplayer可以实现各种视频流的前端直播，
目前这篇关于video.js实现直播、视频，拓展下知识面

使用

下载相应插件

npm install video.js --save
npm install videojs-flash --save //rtmp格式
//flv格式
npm install flv.js --save
npm install videojs-flvjs-es6 --save
//hls格式  video.js7.0以后版本默认支持hls（m3u8）格式  可以不安装，装了也可以使用
npm install videojs-contrib-hls --save

页面引入

 import Videojs from 'video.js'import 'video.js/dist/video-js.css'import "videojs-flvjs-es6";import "videojs-flash";

使用区别

// 标签容器
<videoid="mmiid"class="video-js vjs-big-play-centered vjs-fluid"controlspreload="auto"width="100%"height="100%">
</video>

// hls
this.videoPlayer = Videojs(document.querySelector('#mmiid'),{autoplay: 'muted',//自动播放controls: true,//用户可以与之交互的控件loop:true,//视频一结束就重新开始muted:false,//默认情况下将使所有音频静音aspectRatio:"16:9",//显示比率fullscreen:{options: {navigationUI: 'hide'}},techOrder: ["html5", "flvjs"],// 兼容顺序html5:{hls: {withCredentials: true}},sources: [{ src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8', type: "application/x-mpegURL" }]})

//flv
this.videoPlayer = Videojs(document.querySelector('#mmiid'),{autoplay: 'muted',//自动播放controls: true,//用户可以与之交互的控件loop:true,//视频一结束就重新开始muted:false,//默认情况下将使所有音频静音aspectRatio:"16:9",//显示比率fullscreen:{options: {navigationUI: 'hide'}},techOrder: ["html5", "flvjs"],// 兼容顺序flvjs: {mediaDataSource: {isLive: false,cors: true,withCredentials: false}},sources: [{ src: urlList[0].url, type: "video/x-flv" }]})

// 其他
//rtmp
techOrder: ["html5",  "flash"],// 兼容顺序
sources: [{ src: this.videoUrl, type: "rtmp/flv" }]
// mp4
sources: [{ src: this.videoUrl, type: "video/mp4" }]

测试地址

HLS直播源地址：

CCTV1高清：http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
CCTV3高清：http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8
CCTV6高清：http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8

RTMP直播源地址：

香港卫视：rtmp://live.hkstv.hk.lxdns.com/live/hks1
rtmp://live.hkstv.hk.lxdns.com/live/hks2
湖南卫视：rtmp://58.200.131.2:1935/livetv/hunantv
美国1：rtmp://ns8.indexforce.com/home/mystream
美国中文电视：rtmp://media3.sinovision.net:1935/live/livestream

FLV视频：

http://1011.hlsplay.aodianyun.com/demo/game.flv

vue+video.js实现前端视频流（hls、MP4、flv）相关推荐

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.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)
场景 Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览: Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览_BADAO_LIUMANG_QIZHI的博客-CSDN博客 ...
视频列表html页面,vue + video.js实现视频列表页（多个视频）
vue + video.js实现视频列表页 vue项目中做一个视频列表页,本来用原生video标签来实现,由于考虑到手机浏览器兼容问题,找了很多插件,最后决定用video.js这个插件来实现.Vide ...
开源视频流服务_使用开源Video.js进行实时视频流
开源视频流服务去年,我写过有关使用Linux创建视频流服务器的文章 . 该项目使用实时消息协议(RTMP),Nginx Web服务器,Open Broadcast Studio(OBS)和VLC媒体 ...
vue+video.js播放.m3u8地址视频
使用的包 "video.js": "^7.6.6", "videojs-contrib-hls": "^5.15.0", ...
vue+video.js实现视频播放列表
1.引入Video.js npm install --save-dev video.js 然后在main.js中引用 import Video from 'video.js' import 'vide ...
React使用Video.js播放rtmp，hls视频
公司最近项目需要实时播放摄像头传入的视频,支持rtmp,hls,rtsp格式视频.于是开始封装了一个简单的视视频播放器,刚开始使用的React-palyer但是React-player好像不支持rtm ...
video.js 视频截图、录制、自定义全屏，hls、flv、mp4视频播放
功能 video.js内嵌截图.录制功能 (图片.视频会下载到本地) 自定义全屏播放hls.flv.mp4 功能集合成Vue组件参考 video.js components RecordRTC ...
springboot + vue3实现视频播放Demo（video.js Vue3-video-play视频播放器）
文章目录学习链接前言 ffmpeg 安装ffmpeg 配置环境变量分割视频文件后台配置 WebConfig 前端代码 video.js示例安装依赖视频播放组件效果 Vue3-video- ...
html播放flv直播源,使用flv.js与video.js实现播放视频直播(简教程)
1.准备 (￣▽￣)/ 以上软件请大家自行解压或安装 2.环境配置首先运行livego 运行livego效果安装与运行OBS 打开设置配置流服务器配置连接配置连接连接成功后livego会有 ...

vue+video.js实现前端视频流（hls、MP4、flv）

前言

使用

测试地址

vue+video.js实现前端视频流（hls、MP4、flv）相关推荐

最新文章

热门文章