flvjs api 中文

翻译自用,欢迎纠错、补充

原文:https://github.com/bilibili/flv.js/blob/master/docs/api.md

 

主要方法: flvjs.createPlayer()

function createPlayer(mediaDataSource: MediaDataSource, config?: Config): Player;

* 带?号符号的是非必选项

MediaDataSource

Field

TypeDescription中文
typestringIndicates media type, 'flv' or 'mp4'类型
isLive?booleanIndicates whether the data source is a live stream是否直播
cors?booleanIndicates whether to enable CORS for http fetching跨域
withCredentials?booleanIndicates whether to do http fetching with cookies是否携带COOKIES
hasAudio?booleanIndicates whether the stream has audio track开启声音
hasVideo?booleanIndicates whether the stream has video track开启图像
duration?numberIndicates total media duration, in milliseconds媒体时间总长度,毫秒
filesize?numberIndicates total file size of media file, in bytes文件大小
url?stringIndicates media URL, can be starts with 'https(s)' or 'ws(s)' (WebSocket)媒体网络地址
segments?Array<MediaSegment>Optional field for multipart playback, see MediaSegment媒体列表

如果segments参数存在, 则将播放器列为多源媒体播放。

如果是多源媒体播放,则durationfilesizeurl 这三个参数将被忽略。

MediaSegment

FieldTypeDescription中文
durationnumberRequired field, indicates segment duration in milliseconds媒体时间总长度,毫秒
filesize?numberOptional field, indicates segment file size in bytes文件大小
urlstring

Required field, indicates segment file URL

媒体网络地址

Config

FieldTypeDefaultDescription中文
enableWorker?booleanfalseEnable separated thread for transmuxing (unstable for now)多线程工作?
enableStashBuffer?booleantrueEnable IO stash buffer. Set to false if you need realtime (minimal latency) for live stream playback, but may stalled if there's network jittering.启用缓存
stashInitialSize?number384KBIndicates IO stash buffer initial size. Default is 384KB. Indicate a suitable size can improve video load/seek time.缓存大小
isLive?booleanfalseSame to isLive in MediaDataSource, ignored if has been set in MediaDataSource structure.是否直播,会覆盖上面的配置
lazyLoad?booleantrueAbort the http connection if there's enough data for playback.懒加载,如果缓存到足够的秒数,则停止下载
lazyLoadMaxDuration?number3 * 60Indicates how many seconds of data to be kept for lazyLoad.懒加载最多的秒数
lazyLoadRecoverDuration?number30Indicates the lazyLoad recover time boundary in seconds.缓存剩余秒数时继续下载
deferLoadAfterSourceOpen?booleantrueDo load after MediaSource sourceopen event triggered. On Chrome, tabs which be opened in background may not trigger sourceopen event until switched to that tab. 
autoCleanupSourceBufferbooleanfalseDo auto cleanup for SourceBuffer自动清理缓存
autoCleanupMaxBackwardDurationnumber3 * 60When backward buffer duration exceeded this value (in seconds), do auto cleanup for SourceBuffer 
autoCleanupMinBackwardDurationnumber2 * 60Indicates the duration in seconds to reserve for backward buffer when doing auto cleanup. 
fixAudioTimestampGapbooleantrueFill silent audio frames to avoid a/v unsync when detect large audio timestamp gap.填补无音频帧
accurateSeek?booleanfalseAccurate seek to any frame, not limited to video IDR frame, but may a bit slower. Available on Chrome > 50FireFox and Safari.精确寻帧到任何帧,不局限于视频IDR帧,但可能会慢一点。可在Chrome >火狐和Safari浏览器。
seekType?string'range''range' use range request to seek, or 'param' add params into url to indicate request range. 
seekParamStart?string'bstart'Indicates seek start parameter name for seekType = 'param' 
seekParamEnd?string'bend'Indicates seek end parameter name for seekType = 'param' 
rangeLoadZeroStart?booleanfalseSend Range: bytes=0- for first time load if use Range seek发送范围:Range: bytes=0- 如果使用范围查找第一次加载
customSeekHandler?objectundefinedIndicates a custom seek handler指示自定义查找处理程序
reuseRedirectedURL?booleanfalseReuse 301/302 redirected url for subsequence request like seek, reconnect, etc.重用301/302重定向url,用于随后的请求,如查找、重新连接等。
referrerPolicy?stringno-referrer-when-downgradeIndicates the Referrer Policy when using FetchStreamLoader指示使用FetchStreamLoader时的引用方策略
headers?objectundefinedIndicates additional headers that will be added to request添加请求头

method:

    constructor(mediaDataSource: MediaDataSource, config?: Config): Player;
    destroy(): void;
    on(event: string, listener: Function): void;
    off(event: string, listener: Function): void;
    attachMediaElement(mediaElement: HTMLMediaElement): void;
    detachMediaElement(): void;
    load(): void;
    unload(): void;
    play(): Promise<void>;
    pause(): void;
    type: string;
    buffered: TimeRanges;
    duration: number;
    volume: number;
    muted: boolean;
    currentTime: number;
    mediaInfo: Object;
    statisticsInfo: Object;

官方找不到方法的说明。。

 

自己看的,请大家指错。

<template> <div class="mainAspect"> <!-- <video id="videoElement" autoplay width="100%" height="100%"></video> --> <!-- <video autoplay id="videoPlayer" class="video-js vjs-default-skin" controls> <source :src="streamUrl" type="rtmp/flv"> </video> --> <video id="myVideo1" controls class="vjs-default-skin vjs-big-play-centered vjs-16-9 video-js" preload="auto" style="width: 712px;height:320px;object-fit: fill" > </video> </div> </template> <script setup> import flvjs from "flv.js"; import videojs from "video.js"; import { computed, onMounted, ref, watch, onUnmounted } from 'vue'; import { getAction } from '../api'; const videoPath='rtsp://admin:sess2025@109.136.71.182:554/streaming/channels/401' const streamUrl=ref("rtmp://109.136.146.133:1935/live/home") const flvPlayer = ref(''); const VideoData=async ()=>{ const res = await getAction(videoPath); console.log(res) }; const createVideo=()=>{ // if (flvjs.isSupported()) { // var videoElement = document.getElementById("videoElement"); // flvPlayer.value = flvjs.createPlayer({ // type: "flv", // isLive: true, // cors:true, // fluid:true, // autoCleanupSourceBuffer: true, // 是否自动清理缓存 // stashInitialSize:128, // url: "http://109.136.146.133:9000/live?port=1935&app=live&stream=home", // // url: "rtmp://109.136.146.133:1935/live/home", // }); // flvPlayer.value.attachMediaElement(videoElement); // flvPlayer.value.load(); // setTimeout(() => { // flvPlayer.value.play(); //播放流 // }, 1000); // } else { // console.error("Your browser does not support FLV.js"); // } var player=videojs('myVideo1',{ sources:[{ type: "rtmp/flv", src:streamUrl.value, }], //属性可以去查中文文档 controls: true, //自动播放属性,muted:静音播放 autoplay: true, preload: "auto", textTrackDisplay: false, errorDisplay: false, controlBar: false, bigPlayButton: false, autoplay: true }); console.log(player.sources.src); player.on("play", function(){ this.timer = setTimeout(()=>{ //设置延迟执行 console.log('延时3秒放大窗口'); },3000); }); }; onMounted(() => { VideoData(); // createVideo(); });这里为什么找不到地址,明明地址是正确的No compatible source was found for this media. MediaError {code: 4, message: 'No compatible source was found for this media.'}
09-26
<template> <div id="video_window" class="video_window"> <div class="header-wrapper"> <h3>{{props.deviceId}}——{{props.selectedCamera.name}}——Camera</h3> <el-button class="close-btn" circle @click="handleCloseAspect" ><el-icon><Close /></el-icon></el-button> </div> <div class="mainAspect"> <div v-if="videoLoading" class="custom-loading-layer"> <div class="loading-spinner"></div> <p>视频加载中...</p> </div> <video id="videoElement" class="videoElement" ref="flvPlayer" autoplay preload="metadata"></video> </div> </div> </template> <script setup> import flvjs from "flv.js" import { Close } from '@element-plus/icons-vue' import { computed, onMounted, ref, watch, onUnmounted,defineEmits,nextTick } from 'vue'; import { getAction,videoClose } from '../api'; import { ElMessage } from 'element-plus'; const props = defineProps({ deviceId: { type: String, required: true }, selectedCamera:{ type: Object, required: true } // const selectedDevice = ref({ // id: null, // ip: null, // position: null, // size: { width: 2, height: 1, depth: 1 }, // status: 'normal', // normal/warning/error // videos: [ // {name:"Load", channelNo:1}, // {name:"Unload", channelNo:2}, // {name:"DFC", channelNo:3}, // {name:"D/S L", channelNo:4}, // {name:"D/S R", channelNo:5}, // {name:"A/H L", channelNo:6}, // {name:"A/H R", channelNo:7}, // {name:"Wafer", channelNo:8}, // ], // programs: { // AAA: true, // 已安装 // BBB: false // 未安装 // } // }); }); const emit= defineEmits(['close']) const originVideoPath='rtsp://admin:sess2025@' const flvPath=ref(null); const flvPlayer = ref(null); let player=null; const videoLoading=ref(false); watch( ()=>props.selectedCamera, async (newVal,oldVal) =>{ console.log(newVal); console.log(oldVal); if (player) { player.destroy(); player=null; videoLoading.value=true; await closeOldVideoStream(oldVal.ip, oldVal.channelNo); await fetchVideoStream(); await nextTick(); initPlayer(); } },{deep:true} ) const handleCloseAspect=()=>{ emit('close'); } const fetchVideoStream=async ()=>{ const res = await getAction(originVideoPath+String(props.selectedCamera.ip)+":554/streaming/channels/"+String(props.selectedCamera.channelNo)+"01"); flvPath.value=res.data; }; const closeVideoStream=async ()=>{ const res = await videoClose(props.selectedCamera.ip,props.selectedCamera.channelNo); console.log(res.data); }; const closeOldVideoStream=async (ip, channelNo)=>{ const res = await videoClose(ip, channelNo); console.log(res.data); }; const initPlayer=()=>{ if(flvPath.value!==null){ if (flvjs.isSupported()) { let videoElement = document.getElementById('videoElement') player = flvjs.createPlayer({ type: 'flv', isLive: true, fluid: true, stashInitialSize: 0,// 减少首桢显示等待时长 url: flvPath.value, //url地址 }) player.attachMediaElement(videoElement) player.load() player.on(flvjs.Events.METADATA_ARRIVED,()=>{ videoLoading.value=false; }) player.play() } }else{ return; } }; onMounted(async () => { videoLoading.value=true; const videoSrc = await fetchVideoStream(); initPlayer(); }); onUnmounted(() => { if (player) { closeVideoStream(); player.destroy(); player=null; } }); </script> <style scoped> .video_window{ position: fixed; top: 15%; left: 30%; width: 50%; height: 65%; border-radius: 5%; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border-radius: 20px; box-shadow: 0 12px 40px rgba(100, 100, 150, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.6) inset; overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); } /* 标题栏 - 渐变背景与现代化按钮 */ .header-wrapper { padding: 18px 25px; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); position: relative; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .header-wrapper h3 { margin: 0; color: white; font-weight: 500; font-size: 1.2rem; letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(0,0,0,0.1); } .mainAspect{ width: 100%; height: 90%; background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); position: relative; overflow: hidden; border-radius: 0 0 28px 28px; } .videoElement{ width: 100%; height: 100%; transform-origin: center; object-fit: contain; transition: opacity 0.3s; } .close-btn { position: absolute; right: 10px; top: 10px; z-index: 20; background: rgba(255,255,255,0.2); border: none; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } /*加载状态样式 */ .custom-loading-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; background: rgba(15, 12, 41, 0.85); backdrop-filter: blur(4px); color: #94a3b8; } .loading-spinner { width: 40px; height: 40px; border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; animation: spin 1s linear infinite; border-top-color: #2cb67d; border-left-color: rgba(124, 58, 237, 0.5); border-bottom-color: rgba(44, 182, 125, 0.3); border-right-color: rgba(124, 58, 237, 0.2); border-width: 4px; } @keyframes spin { to { transform: rotate(360deg); } } </style>在我现有的这个上面,分析一下,能控制视频全屏显示吗
最新发布
10-29
评论 14
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值