vue，videojs实现hls直播（萤石视频回放）

写点如何用video.js HIS的直播播放。及（萤石视频回放）
哎 FLASH12月份就不能用了

首先 package.json 文件，npm install 安装对应依赖

"video.js": "^7.8.4",
"videojs-contrib-hls": "^5.15.0",
"vue-video-player": "^5.0.2",

如需flash播放需安videojs-flash

main.js全局引入

import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
Vue.use(VideoPlayer)

在view层引入

import videojs from 'video.js'

html代码

       <video-playerclass="vjs-custom-skin":options="playerOptions":playsinline="true"@ready="playerReadied($event)"/>

 playerOptions: {height: '360',autoplay: true,playbackRates: [0.7, 1, 1.3, 1.5, 1.7],sources: [{type: 'application/x-mpegURL',src: '' // 你的m3u8地址（必填）}],poster:''}

playerReadie方法（ methods）

playerReadied(player) {const track = new videojs.AudioTrack({id: 'my-spanish-audio-track',kind: 'translation',label: 'Spanish',language: 'es'})player.audioTracks().addTrack(track)// Get the current player's AudioTrackList object.const audioTrackList = player.audioTracks()// Listen to the "change" event.audioTrackList.addEventListener('change', function() {// Log the currently enabled AudioTrack label.for (let i = 0; i < audioTrackList.length; i++) {const track = audioTrackList[i]if (track.enabled) {videojs.log(track.label)return}}})},

如果要使用RTMP格式的可以使用VUE-FLASH
介于目前公司的这个项目，通过ifarem也可实现，回放预览，转直播功能。不需引入插件。
下面是萤石直播视频回放的代码

  <iframev-if="isVideo"id="ysOpenDevice":src="nowVideoUrl"width="100%"height="500"allowfullscreen/>

mounted方法

  mounted() {var player = document.getElementById('ysOpenDevice').contentWindow/* iframe 支持方法 */player.postMessage('play', 'https://open.ys7.com/ezopen/h5/iframe') /* 播放 */player.postMessage('stop', 'https://open.ys7.com/ezopen/h5/iframe') /* 结束 */player.postMessage('capturePicture', 'https://open.ys7.com/ezopen/h5/iframe') /* 截图 */player.postMessage('openSound', 'https://open.ys7.com/ezopen/h5/iframe') /* 开启声音 */player.postMessage('closeSound', 'https://open.ys7.com/ezopen/h5/iframe') /* 关闭声音 */player.postMessage('startSave', 'https://open.ys7.com/ezopen/h5/iframe') /* 开始录制 */},

然后在methods方法
通过把nowVideoUrl定义为后端传给你直播地址的数据，

this.nowVideoUrl = `https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/${row.deviceSerial}/${this.VideoAddress}&accessToken=${this.getAccessToken}&begin=${row.startTime}&end=${row.endTime}`

上面的是萤石直播视频的规定转码格式，有TOKEN和设备号，开始时间，结束时间。

vue，videojs实现hls直播（萤石视频回放）相关推荐

实现网页直播源码的直播与视频回放功能
流程介绍网页直播源码直播.视频回放大致流程:获取视频流或本地音视频文件,将流推入到流媒体服务器当中,在 web 端使用合适的 js 拉流并播放音视频: 三种网页直播源码常见的流媒体协议介绍(RTMP ...
HLS直播预取视频并更新m3u8
HLS直播预取视频并更新m3u8 #!/usr/bin/python27 import json import threading import urllib import sys import ha ...
【Vue前端】使用 videojs 做 hls 直播流遇到的问题及解决方案总结（销毁、反复加载视频流、http-flv 低延时优化解决方向）
由于在自己的工作和学习过程中,只查看某个大佬的教程或文章无法满足自己的学习需求和解决遇到的问题,所以自己在追赶大佬们步伐的基础上,又自己总结.整理.汇总了一些资料,方便自己理解和后续回顾,同时也希望给 ...
音视频开发（15）---IPC+NVR+路由器+ffmpeg+nginx实现网页/Android/IOS的HLS直播
海康IPC+NVR+路由器+ffmpeg+nginx实现网页/Android/IOS的HLS直播研究摄像头直播有一个月了,最终领导决定使用HLS协议进行摄像头实时预览,原因是HLS对移动端和Web端 ...
java做flv直播服务器,EasyDSS流媒体服务器软件（支持RTMP/HLS/HTTP-FLV/视频点播/视频直播）-正式环境安装部署攻略...
EasyDSS流媒体服务器软件,提供一站式的转码.点播.直播.时移回放服务,极大地简化了开发和集成的工作. 其中,点播功能主要包含:上传.转码.分发.直播功能,主要包含:直播.录像, 直播支持RTMP ...
vue使用原生videojs 播放m3u8格式的视频——播放m3u8格式视频（一）
vue使用原生video播放m3u8格式的视频 1.安装依赖 2.页面引入插件(这里我是页面单独引入,减少项目体积) 3.页面中的使用常见问题 4.实现过程 5.实现.m3u8格式视频播放方法 1. ...
vue+flv.js+SpringBoot+websocket实现视频监控与回放
vue+flv.js+SpringBoot+websocket实现视频监控与回放需求:vue+springboot的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能. 之 ...
利用videojs进行视频回放
最近换了新工作,公司用了现在比较流行的spring cloud微服务+vue实现前后端分离开发,由于之前都没有接触过vue,基本相当于从0开始,写下博客,记录下开发过程中的采坑之旅. 最近用到了vid ...
看点直播抓取视频回放链接
需要预先安装charles,并设置了手机网络抓包 https://blog.csdn.net/zs343961443/article/details/113748778 1.手机不要连你设置好的wif ...
python接入萤石云HLS直播流（海康威视摄像头4g连接条件下）
1.将插好4g流量卡海康威视摄像头添加到萤石云下载注册并登陆萤石云,点击添加设备,输入摄像头后部的序列号以及验证码(已改过设备密码的填写密码). 获取HLS直播流地址登陆萤石云开发平台(https ...

vue，videojs实现hls直播（萤石视频回放）

vue，videojs实现hls直播（萤石视频回放）相关推荐

最新文章

热门文章