需求：原本是需要前端播放RTMP视频流的，但是现在的浏览器都不支持flash插件了，让用户安装flash插件也不现实，所以直接让后端将RTMP视频流转换成flv视频流给到前端进行播放。
直接上demo，直接就能播放，如果遇到播放不了就是视频流地址已失效
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>video.js播放FLV</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" /><link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.21.0/video-js.min.css" rel="stylesheet"><style>/*剩余时长*/.video-js .vjs-remaining-time {margin-right: 7%;}/*截图按钮*/.screenshotBtn {position: absolute;top: 6px;right: 54px;}</style>
</head><body><div class="row"><div class="videoWarp col-md-4" id="videoWarp1"><video id="video1" class="video-js vjs-big-play-centered vjs-fluid" controls controlslist="nodownload"preload="auto" crossOrigin="Anonymous"></video></div></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.21.0/video.min.js"></script><script src="https://unpkg.com/videojs-flvjs/dist/videojs-flvjs.min.js"></script><script src="https://unpkg.com/flv.js/dist/flv.min.js"></script><script src="https://www.webrtc-experiment.com/screenshot.js"></script><script type="text/javascript">let videoUrlFLV = 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv';let videoPlayer = null;initVideoJS('video1', 'flvjs', videoUrlFLV);// 初始化Videojs插件function initVideoJS(vid, vtype, vurl) {let vSourceType = '';if (vtype === 'flvjs') { //flv格式vSourceType = 'video/x-flv';} else { //其它格式alert('Video Type Error ...');}videoPlayer = videojs(vid, {autoplay: true, //自动播放controls: true, //用户可以与之交互的控件loop: true, //视频一结束就重新开始muted: true, //默认情况下将使所有音频静音aspectRatio: '16:9', //显示比率disablePictureInPicture: true, //禁用画中画techOrder: [vtype], //['HTML5',''flvjs'] 播放模式及顺序preload: "auto", //预加载playsinline: true, //解决在iPhone中播放时自动全屏问题controlBar: { // 设置控制条组件/* 设置控制条里面组件的相关属性及显示与否 */'remainingTimeDisplay': true,/* 使用children的形式可以控制每一个控件的位置，以及显示与否 */children: [{ name: 'playToggle' }, // 播放/暂停按钮{name: 'volumePanel', // 音量控制inline: false, // 竖直方式},{ name: 'liveDisplay' }, //直播流时，显示LIVE{ name: 'progressControl' }, // 播放进度条{ name: 'remainingTimeDisplay' }, // 剩余时长{ name: 'FullscreenToggle' }, // 全屏]},flvjs: {mediaDataSource: {isLive: true,cors: true,withCredentials: false,},},sources: [{ src: vurl, type: vSourceType }],}, function () {});setTimeout(() => {videoPlayer.play();addScreenshotBtnHandle()}, 500)}//视频区域禁用右键$("#video1").bind('contextmenu', function () {return false;});// 添加截图按钮function addScreenshotBtnHandle(params) {$('.vjs-control-bar').append("<div class='screenshotBtn'><svg t='1619515761104' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='11028' width='15' height='15'><path d='M512 384c55.6 0 107.8 21.6 147.1 60.9S720 536.4 720 592s-21.6 107.8-60.9 147.1S567.6 800 512 800s-107.8-21.6-147.1-60.9S304 647.6 304 592s21.6-107.8 60.9-147.1S456.4 384 512 384z m0-64c-150.2 0-272 121.8-272 272s121.8 272 272 272 272-121.8 272-272-121.8-272-272-272z' p-id='11029' fill='#ffffff'></path><path d='M650.9 128l4.4 23.6C666.7 212.1 719.6 256 781.1 256H896c35.3 0 64 28.7 64 64v512c0 35.3-28.7 64-64 64H128c-35.3 0-64-28.7-64-64V320c0-35.3 28.7-64 64-64h114.9c61.6 0 114.5-43.9 125.8-104.4l4.4-23.6h277.8z m39.8-64H333.3c-7.7 0-14.3 5.5-15.7 13.1l-11.8 62.7c-5.7 30.3-32.1 52.2-62.9 52.2H128C57.3 192 0 249.3 0 320v512c0 70.7 57.3 128 128 128h768c70.7 0 128-57.3 128-128V320c0-70.7-57.3-128-128-128H781.1c-30.8 0-57.2-21.9-62.9-52.2l-11.8-62.7c-1.4-7.6-8-13.1-15.7-13.1z' p-id='11030' fill='#ffffff'></path><path d='M224 352h-64c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c17.7 0 32 14.3 32 32s-14.3 32-32 32zM512 560c17.6 0 32 14.4 32 32s-14.4 32-32 32-32-14.4-32-32 14.4-32 32-32z m0-64c-53 0-96 43-96 96s43 96 96 96 96-43 96-96-43-96-96-96z' p-id='11031' fill='#ffffff'>")}// 截图按钮点击事件$(document).on('click', '.screenshotBtn', function () {const fileType = 'png';// 找到需要截图的video标签const video = $(this).parent().siblings("video")[0];//console.log(video);video.crossOrigin = "anonymous";const canvas = document.createElement('canvas');canvas.width = video.videoWidth;canvas.height = video.videoHeight;canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); // 图片大小和视频分辨率一致const strDataURL = canvas.toDataURL('image/' + fileType); // canvas中video中取一帧图片并转成dataURLlet arr = strDataURL.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}const blob = new Blob([u8arr], {type: mime})const url = window.URL.createObjectURL(blob);downloadFile(url, 'png')})// 下载截图function downloadFile(blob, fileType) {const a = document.createElement('a')a.style.display = 'none'a.href = blobconst time = new Date().getTime()a.download = `${time}.${fileType}`document.body.appendChild(a)a.click()setTimeout(function () {document.body.removeChild(a)window.URL.revokeObjectURL(blob)}, 1000)}</script>用于测试的视频流地址，不一定有效
直播流在线测试地址 m3u8，rtsp，rtmp，flv，mp4_直播测试地址-CSDN博客
![[HFCTF2020]EasyLogin](http://pic.xiahunao.cn/[HFCTF2020]EasyLogin)
