m3u8流的视频播放与销毁

1 m3u8流

有三种类型摄像头，流不同，有flv、mp4。
为了统一，后台将flv的流转换成了m3u8，其它流转换成mp4，前端实现video播放

//下载插件 m3u8使用
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>// HTML 节点
<div id="videoContent" style="width:500px;height:400px"></div>//创建video节点并播放
//newPlayurl 为视频流
let videoDiv = document.createElement('div');
videoDiv.style.width = '100%'
videoDiv.style.height = '100%'
videoDiv.style.textAlign = 'center'
videoDiv.innerHTML = `<video id='easycvr${row.imei}' typeSign='Easycvr' controls autoplay muted preload='metadata' class='video video-js vjs-big-play-centered' data-setup='{}' style='width:auto;height:100%;position:relative;margin: 0 auto'>autoplay width="1000px" controls><source src='${newPlayurl}' type="application/x-mpegURL"></video>
`
document.getElementById('videoContent').appendChild(videoDiv.cloneNode(true));setTimeout(function(){let m3u8UrlObj = '';m3u8UrlObj = videojs(`easycvr${row.imei}`,{bigPlayButton: true,textTrackDisplay: false,posterImage: false,errorDisplay: false});m3u8UrlObj.play();//更新已经打开的暂存视频流数let obj = {id:row.id,type:'Easycvr',m3u8Url:m3u8UrlObj};_this.alarmDialogVideo.videoObj = obj;
})

2 mp4

//创建video节点
let videoDiv = document.createElement('div');
videoDiv.style.width = '100%'
videoDiv.style.height = '100%'
videoDiv.innerHTML = `<video id='${row.imei}' typeSign='Linkcvr' class='video' controls autoplay muted preload='metadata' style='width:auto;height:100%;position:relative;margin: 0 auto'><source src='${newPlayurl}' type='video/mp4'></video>
`
document.getElementById('videoContent').appendChild(videoDiv.cloneNode(true));let obj = {id:row.id,type:'Linkcvr'};
_this.alarmDialogVideo.videoObj = obj;

暂停并销毁视频

let video = document.getElementById('videoContent').querySelector('video');
if(_this.alarmDialogVideo.videoObj.type){if(_this.alarmDialogVideo.videoObj.type == "Easycvr"){// easycvr  【 m3u8流 】_this.alarmDialogVideo.videoObj.m3u8Url.pause()_this.alarmDialogVideo.videoObj.m3u8Url.dispose()}else{// linkcvr  lvc   【 mp4流 】video.pause()video.load()video.removeAttribute('src')}
}
//清空暂存的视频
_this.alarmDialogVideo.videoObj = {};
//清空视频外容器内元素
document.getElementById('videoContent').innerHTML = '';

m3u8流的视频播放与销毁相关推荐

m3u8流文件在html视频播放器中播放有声音无画面问题
m3u8流文件在html视频播放器中播放有声音无画面问题前言最近在做一个海康视频设备直接在网页上播放的功能,由于现在浏览器不支持flash等插件,所以想着将海康的rtsp流先转化为hls流再使用h ...
Hls.js播放m3u8视频 DPlayer视频播放器（easypan） MSE简介
文章目录学习链接 hls.js播放m3u8视频效果代码前端代码安装hls.js App.vue 后台代码准备文件 mp4文件切片java实现 TsController TsService ...
Dplayer直播m3u8流
what? 这是一个前端的直播流直播流为m3u8流--我写的是原生JS写的引入的重点是: 1.第一要引入Dplayer的JS和CSS: <link rel="stylesheet&q ...
qml m3u8流播放时，卡主修复策略
项目场景: 回到项目背景,产品提供了wifi和4G双网络功能,应用框架Qt,UI用的是qml,QT版本是5.10.1, 问题描述在QMl中,使用MediaPlayer 来播放m3u8流,发现如果正在 ...
Nginx增加m3u8流视频文件功能模块推流和拉流
Nginx增加m3u8流视频文件功能模块推流和拉流 FastDFS分布式文件系统安装和配置_亲测成功 ./configure --prefix=/u06/data/apps/nginx-rtmp \ ...
mp4视频分片生成m3u8流文件并加密
目录场景描述加密准备视频分片 Java代码实现场景描述相信大家都有这样的经历,一个视频太大,放到服务器上面,播放的时候,受服务器宽带和自己网络的影响访问会很慢. 经常看视频的小伙伴肯定看到过 ...
html支持网络串流flv视频播放
1:直接上代码,把url替换成flv访问路径就可以我这项目是时时拉取nms(Node-Media-Server)的视频 <!DOCTYPE html> <html> < ...
android音视频播放器开发百度云,Android 播放端 SDK
1 概述 PLDroidPlayer 是一个适用于 Android 平台的音视频播放器 SDK,可高度定制化和二次开发,为 Android 开发者提供了简单.快捷的接口,帮助开发者在 Android ...
使用vlc播放m3u8网络视频教程
例子视频网址 https://20200407/1kDcVooU/hls/index.m3u8 打开vlc视频播放器点击媒体选择打开网络串流将网址填入点击播放即可

m3u8流的视频播放与销毁

1 m3u8流

2 mp4

暂停并销毁视频

m3u8流的视频播放与销毁相关推荐

最新文章

热门文章