flv+hls播放器封装，支持flv和m3u8俩种数据流

可以播放flv流

可以播放m3u8流

可以截屏并且自动下载到本地

<template><divv-if="isWho === 'Nodata'"style="height: 300px;line-height: 300px;text-align: center;font-size: 20px;color: red;background-color: #000000;color: #fff;">播放地址错误</div><div class="video-container" v-if="isWho === 'flv'"><video:id="`videoElement${index}`"crossorigin="Anonymous"class="centeredVideo"controlsautoplaymutedlooppreload="auto"></video><div class="btn-wrap" @click="save" v-if="isScreenCapture"> 截屏 </div></div><divv-if="isWho === 'm3u8'"class="video-play video-container":class="{ 'video-bg-wrap': !`videoElement${props.index}` }"><divstyle="font-size: 20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"v-if="showloading"><a-button:loading="showloading"type="link"style="border: 0px solid transparent; color: #cccccc">加载中...</a-button></div><videov-show="!error":id="`videoElement${index}`"autoplaymuted@play="handleFullScreen"></video><div class="btn-wrap" @click="save" v-if="isScreenCapture && !showloading"> 截屏 </div><div class="wrap_screen" @click="launchFullscreen" v-if="isScreenCapture && !showloading">全屏</div></div>
</template><script setup>import flvjs from 'flv.js';import { ref, nextTick, onMounted, defineProps, watch, onUnmounted } from 'vue';import { message } from 'ant-design-vue';const props = defineProps({url: {type: String,default: '',},index: {type: Number,default: 0,},downFileName: {type: String,default: '截图',},isScreenCapture: {type: Boolean,default: true,},});const hls = ref(null);const error = ref(false);let showloading = ref(true); //加载中预留控制console.log(props.url);let isWho = ref('flv');if (props.url.indexOf('.m3u8') !== -1) {// 此处不是m3u8数据流isWho.value = 'm3u8';} else if (props.url.indexOf('.flv') !== -1) {// 此处不是m3u8数据流isWho.value = 'flv';} else {// 此处不是数据流isWho.value = 'Nodata';}if (isWho.value === 'flv') {const flv_load = () => {var videoElement = document.getElementById(`videoElement${props.index}`);if (flvjs.isSupported()) {var flvPlayer = flvjs.createPlayer({type: 'flv', //媒体类型 mp4/flvurl: props.url, //flv格式媒体URLisLive: true, //数据源是否为直播流hasAudio: false, //数据源是否包含有音频hasVideo: true, //数据源是否包含有视频enableStashBuffer: true, //是否启用缓存区},{enableWorker: false, // 是否启用分离的线程进行转换enableStashBuffer: false, //关闭IO隐藏缓冲区autoCleanupSourceBuffer: true, //自动清除缓存},);flvPlayer?.attachMediaElement(videoElement); //将播放实例注册到节点flvPlayer?.load(); //加载数据流flvPlayer?.play().catch(() => {flvPlayer?.play();}); //播放数据流}};onMounted(() => {nextTick(() => {flv_load();});});}if (isWho.value === 'm3u8') {watch(props,() => {setTimeout(() => {playVideo(`videoElement${props.index}`, props.url);}, 1000);},{immediate: true,},);onMounted(() => {playVideo(`videoElement${props.index}`, props.url);setTimeout(() => {showloading.value = false;}, 6000);});const playVideo = (id, url) => {if (id && url) {// showloading.value = true;error.value = false;let video = document.getElementById(id);hls.value = new Hls();hls.value.attachMedia(video);hls.value.on(Hls.Events.MEDIA_ATTACHED, () => {hls.value.loadSource(url);});hls.value.on(Hls.Events.MANIFEST_PARSED, () => {// showloading.value = false;});hls.value.on(Hls.Events.ERROR, (event, data) => {console.log('MANIFEST_ERROR', id, url, event, data);if (data.fatal) {// showloading.value = false;this.error = true;hls.value.stopLoad();switch (data.type) {case Hls.ErrorTypes.NETWORK_ERROR://break;case Hls.ErrorTypes.MEDIA_ERROR://break;default:hls.value.destroy();break;}}});}};onUnmounted(() => {if (hls.value) {hls.value?.detachMedia();hls.value?.destroy();}hls.value = null;});}// -------------------------------截屏并且下载----------------------------------------let mySrc = '';const htmlToImage = () => {var videoElement = document.getElementById(`videoElement${props.index}`);var canvas = document.createElement('canvas');canvas.width = videoElement.clientWidth;canvas.height = videoElement.clientHeight;if (!canvas.getContext) {message.error('您的浏览器暂不支持canvas');return false;} else {var context = canvas.getContext('2d');var video = document.getElementById(`videoElement${props.index}`);context.drawImage(video, 0, 0, canvas.width, canvas.height);return (mySrc = canvas.toDataURL('image/png'));}};const save = () => {htmlToImage();nextTick(() => {var triggerDownload = document.createElement('a');triggerDownload.setAttribute('href', mySrc);triggerDownload.setAttribute('download', `${props.downFileName}.png`);triggerDownload.click();});};const myE = ref();const handleFullScreen = (e) => {myE.value = e.target;};const launchFullscreen = () => {let element = myE.value;//此方法不可以在異步任務中執行，否則火狐無法全屏if (element.requestFullscreen) {element.requestFullscreen();} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if (element.msRequestFullscreen) {element.msRequestFullscreen();} else if (element.oRequestFullscreen) {element.oRequestFullscreen();} else if (element.webkitRequestFullscreen) {element.webkitRequestFullScreen();} else {var docHtml = document.documentElement;var docBody = document.body;var videobox = element;var cssText = 'width:100%;height:100%;overflow:hidden;';docHtml.style.cssText = cssText;docBody.style.cssText = cssText;videobox.style.cssText = cssText + ';' + 'margin:0px;padding:0px;';document.IsFullScreen = true;}};
</script><style scoped lang="less">.video-play {width: 100%;height: 100%;position: relative;video {object-fit: fill;height: 100%;width: 100%;}}.video-container {position: relative;.centeredVideo {width: 100%;}.btn-wrap,.wrap_screen {width: 40px;height: 40px;text-align: center;line-height: 40px;border-radius: 50%;// border: 1px solid #cccccc;font-size: 14px;position: absolute;bottom: 80px;right: 10px;color: #fff;font-weight: 700;cursor: pointer;opacity: 0;transition: opacity 0.5s ease;}.wrap_screen {bottom: 30px;}}.video-container:hover {.btn-wrap {opacity: 1;background-color: #666666;}.wrap_screen {opacity: 1;background-color: #666666;}}
</style>

使用

//引入播放器
import VideoFlv from './flvAndM3u8Video.vue';
//使用
//url:视频流
//downFileName：指定截屏后，自动下载到本地的文件名的名称
//index:注意，此处类型为number类型，不可重复！（id的唯一性，不可重复），最好使用时间戳或者BigInt类型
<VideoFlv :url="XXXXXX" :downFileName="XXXXXX" :index="XXXXXX" />

flv+hls播放器封装，支持flv和m3u8俩种数据流相关推荐

PLDroidPlayer 是 Pili 直播 SDK 的安卓播放器。支持所有直播常用的格式，如：RTMP、HLS、FLV。拥有优秀的功能和特性，如：首屏秒开、追帧优化、丰富的数据和状态回调、硬解软解
PLDroidPlayer 是 Pili 直播 SDK 的安卓播放器.支持所有直播常用的格式,如:RTMP.HLS.FLV.拥有优秀的功能和特性,如:首屏秒开.追帧优化.丰富的数据和状态回调.硬解软解 ...
Vcastr 2.2 flv 网络播放器参数设置
Vcastr 2.2 flv 网络播放器参数设置参数名称参数说明默认值 vcastr_file 方法2传递影片flv文件地址参数,多个使用|分开空 vcastr_title 影片标题参数,多 ...
Vcastr 2.2 flv 网络播放器
导读: Vcastr2.2 是一款FLV网络播放器,可以用于各种新闻系统或者blog系统,Vcastr 拥有众多特点和自定义设置,经过不断升级修正,已经具备用户需要的大多数基本功能. 例子免费下载 ...
JW PLAYER 是一个界面简洁、功能齐全的在线flv flash播放器
JW PLAYER 是一个界面简洁.功能齐全的在线flv flash播放器.有着很多可选控制参数. 多个参数可以混合使用,下面选择几个作简要说明: file (FLV文件的地址,如果不设置则默认为jw ...
flv网页播放器php源码下载,JavaScript_js实现的万能flv网页播放器代码，本文实例讲述了js实现的万能fl - phpStudy...
js实现的万能flv网页播放器代码本文实例讲述了js实现的万能flv网页播放器代码.分享给大家供大家参考,具体如下: 附: swfobject.js的官方地址:http://blog.deconce ...
Android 中封装优雅的 MediaPlayer 音频播放器，支持多个播放器
Android 中封装优雅的 MediaPlayer 音频播放器,支持多个播放器实例的示例: public class AudioPlayer implements MediaPlayer.OnPre ...
FFmpeg/WebRTC/RTMP/RTSP/HLS/播放器-音视频流媒体高级开发【零声学院】
FFmpeg/WebRTC/RTMP/RTSP/HLS/播放器-音视频流媒体高级开发学习音视频流媒体高级开发学习 01音视频基础 [录播]0-音视频开发高级课程简介(22分钟) 免费试学 [录播] ...
ffplay自定义播放器封装C#接口
ffplay自定义系列第一章自定义播放器接口第二章倍速播放第三章 dxva2硬解渲染第四章提供C#接口(本章) 第五章制作wpf播放器文章目录 ffplay自定义系列前言一.接口 ...
C# 视频监控系列（11）：H264播放器——封装API[HikPlayM4.dll]
前言当你认真的写完客户端和服务器端的时候可能不需要再继续往下看关于播放器的代码和说明,因为你已经掌握了如何转换VC++代码的技巧了,加上GOOGLE再来完成这个播放器应该算小菜了.但是作为我的系列, ...

flv+hls播放器封装，支持flv和m3u8俩种数据流

可以播放flv流

可以播放m3u8流

可以截屏并且自动下载到本地

flv+hls播放器封装，支持flv和m3u8俩种数据流相关推荐

最新文章

热门文章