zhw2590582 / flvplayer Goto Github PK
View Code? Open in Web Editor NEW:lollipop: FlvPlayer.js is a JavaScript player for decode flv to the canvas
Home Page: https://flvplayer.js.org
License: MIT License
:lollipop: FlvPlayer.js is a JavaScript player for decode flv to the canvas
Home Page: https://flvplayer.js.org
License: MIT License
实际需求还是h5更大。 而且通过canvas绘制的视频,能够完美解决国内QQ 和 UC等流氓浏览器的劫持video标签的问题。 自己试了下,小米6原生浏览器没有音频。
切换浏览器标签页画面会卡住,可以在实现直播的效果吗,切换标签页并不卡住画面,
能否创建一个简化版的分支,即是去掉所有 class html controls hotkey,只保留播放
tv.cctv.com/live/cctv13/m/
livePlayer.js还没压缩
首先感谢作者的开源,这是个非常棒的项目
问题一:
Google Chrome
版本 87.0.4280.88(正式版本) (64 位)
出现声音无法自动播放的问题
警告:The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page
这个声音自动播放还会持续改进吗
问题二:
页面切换到其他页面时,视频会自动暂停,这是可以配置的吗?还是就是这么设计的。
有很多场景是页面切换了,当前活跃的页面不是视频页面,还是希望让他继续播放。这可以改进吗
看看能否参考下这个项目
https://github.com/matijagaspar/ws-avc-player
直播需要声音
没有声音
PLEASE USE OUR SPECIFIC ISSUE TEMPLATES for bug reports, features and improvement suggestions.
是基于flv.js 修改的吗?
我测试,播放实时视频流的时候,没有画面。
Before mentioning Issue, please send the operating system, browser and version, and debug information together. If there is a flv address that can be accessed from the Internet, it will be more perfect to save time and troubleshoot the problem. Thank you.
在提Issue之前,请把操作系统,浏览器和版本,和debug信息也一起发出来,假如有一个外网可以访问的flv地址那就更完美了,以节省时间并排查问题,谢谢。
你好我遇到个问题,就是浏览器最小化之后视频暂停播放,但是打开浏览器之后视频又继续播放了,我是播放的实时视频。如果最小化一段时间之后,再最大化播放,他是接着之前最小化的时候的时间点放的,这样的话视频就不是实时的了。请问有什么处理方法嘛
系统版本: IOS12.2
浏览器:QQ浏览器9.2.0.4121
报错信息: FlvPlayerError: streamID should be wquals to 0, but get 5243211(数字一直变化)
浏览器: Chrome浏览器67.0.3396.87
报错信息:TypeError: undefined is not an object (near '...}).catch(function () {...'}) 可以播放但是会在短时间内造成页面崩溃
相关操作: 我使用手机访问电脑版DEMO,因为手机版demo并没有声音(不知道是否支持开启声音)。安卓访问电脑版demo无报错正常运行,IOS遇到上述问题
可以提供下multiple decoder.worker的源码么?
在使用multiple decoder的过程中,发现部分流会出问题
移动端全屏放大不准确,位置偏移了好多
只播放一个aac音频文件好像不能,设置hasVideo:false也不行
测试浏览器:谷歌浏览器,微信浏览器
Uncaught FlvPlayerError: AMF: [amf2] type expect 8, but got 3
at Object.error (blob:http://192.168.0.158:8080/9d44f831-74b1-4355-8d94-a8f33954dd7d:1:3393)
at demuxerScripTag (blob:http://192.168.0.158:8080/9d44f831-74b1-4355-8d94-a8f33954dd7d:1:5612)
at onmessage (blob:http://192.168.0.158:8080/9d44f831-74b1-4355-8d94-a8f33954dd7d:1:10909)
谷歌浏览器 ws-flv 视频流 播放只有画面没有声音
This player is not working with Node Media Server FLV streams, (https://github.com/illuspas/Node-Media-Server)
It plays no video, just the audio
我使用typescript 开发的 不知道 能否提供一下定义文件? 如果可以 真的是太感谢了 ~ 另外 我想直接把播放器 直接 在 pixi中进行渲染 是不是 我手动调用 动画帧 并且 修改 runder 中的代码就可以了呢?~ 还有就是 发现 华为较老的机型的默认浏览器 好像无法使用.
测试视频
https://1011.hlsplay.aodianyun.com/demo/game.flv
重现过程
1) 打开demo页面https://flvplayer.js.org/
2) 填写url,decoder改为flvplayer-decoder-multiple.js, hasAudio设置为false
3) 点击Run Code 然后播放,调试控制台无错误,画面出不来。live 设置为true也不行
FlvPlayer: [stream-end],1764177 byte
FlvPlayer: [flv-header],{ signature: FLV, version: 1, flags: 5, headersize: 9 }
FlvPlayer: [AudioSpecificConfig],{ audioObjectType: 2, samplingFrequencyIndex: 4, channelConfiguration: 2 }
FlvPlayer: [AAC-codecs],mp4a.40.2
FlvPlayer: [AVCDecoderConfigurationRecord],{ configurationVersion: 1, AVCProfileIndication: 100, profile_compatibility: 0, AVCLevelIndication: 30, lengthSizeMinusOne: 4, numOfSequenceParameterSets: 1, sequenceParameterSetLength: 30, numOfPictureParameterSets: 1, pictureParameterSetLength: 5 }
FlvPlayer: [AVC-codecs],avc1.6401e
FlvPlayer: [AVC-profile],High
FlvPlayer: [AVC-level],3.0
能看到console里面出来提示, 但是还是需要一个回调
正常播放直播
直播延时严重,原因是 render 频率过慢
电脑与手机
Unable to find global variable 'FlvplayerDecoder' from './flvplayer-decoder-baseline.js'
具体:
no native wasm support detected
blob:ht...e383b7f (第 1 行)
TypeError: Module.asm.x is undefined
blob:ht...e383b7f (第 1 行)
Error: PrevTagSize0 should be equal to 0, but got -196608
操作系统: MacOS Big Sur 11.2.3
浏览器:Chrome 92.0.4515.131
大佬你好,我在一个页面同时开启了12个FlvPlayer播放监控视频,会很卡,有些视频加载不出来,加载出来的画面不动。过一会儿浏览器会提示,喔唷,崩溃啦。
播放1个视频没问题,可以正常播放。
Before mentioning Issue, please send the operating system, browser and version, and debug information together. If there is a flv address that can be accessed from the Internet, it will be more perfect to save time and troubleshoot the problem. Thank you.
在提Issue之前,请把操作系统,浏览器和版本,和debug信息也一起发出来,假如有一个外网可以访问的flv地址那就更完美了,以节省时间并排查问题,谢谢。
操作系统:windows 10
浏览器:Google Chrome 96.0.4664.45
debug: 无报错
在 vue 中使用,将播放器作为一个 components,在视图中多次加载此 component,只会有一个播放器出现
App.vue
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<HelloWorld />
<HelloWorld />
</template>
<style lang="scss">
*{
margin: 0;
padding: 0;
}
</style>
HelloWorld.vue
<template>
<div class="flvplayer-app" @click="jump"></div>
</template>
<script>
import * as FlvPlayer from "flvplayer";
export default {
data() {
return {
player: null,
count: 0,
};
},
mounted() {
this.player = new FlvPlayer({
// Accept http url, websocket url, and file type
url: "/video/demo.flv",
// Accept dom element, dom selector
container: ".flvplayer-app",
// Video poster url
poster: "",
// Whether to print debug information
debug: false,
// Whether live mode
live: false,
// Whether the video loops, in non-live mode
loop: true,
// Whether to use hotkeys, if the control exists
hotkey: true,
// Whether to turn off the volume
muted: true,
// On the mobile side, try to activate the audio after the user touches the screen.
touchResume: false,
// Video chunk size, the default is 1M
videoChunk: 1024 * 1024,
// Audio chunk size, the default is 16kb
audioChunk: 16 * 1024,
// Whether to play automatically
autoPlay: false,
// Whether it contains an audio stream
hasAudio: false,
// Whether to cache the video frame to play
cache: true,
// Maximum time difference between audio and video, unit is ms
// used to automatically adjust audio and video synchronization
maxTimeDiff: 200,
// Whether to display the control, if the control exists
control: false,
// Indicates whether to do http fetching with cookies
withCredentials: true,
// Indicates total file size of media file, in bytes
filesize: Infinity,
// Indicates whether to enable CORS for http fetching
cors: true,
// Volume from 0 to 1, the default is 0.7
volume: 0.7,
// Initialize the frame rate, which will be covered by the actual frame rate of the file
frameRate: 30,
// Initialize the width, which will be covered by the actual width of the file
width: 1280,
// Initialize the height, which will be covered by the actual height of the file
height: 720,
// Initialize http headers
headers: {},
// The path of the video decoder, currently optional flvplayer-decoder-baseline.js and flvplayer-decoder-multiple.js
decoder:
"https://cdn.jsdelivr.net/npm/[email protected]/dist/flvplayer-decoder-baseline.js",
});
},
methods: {
jump() {
this.count++;
if (this.count == 1) {
this.player.play();
} else {
location.href = "https://www.baidu.com";
}
},
},
};
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
#header {
position: fixed;
width: 100%;
background: white;
}
</style>
:D
播放器运行的时间越长,延迟越大,如果要加进度追赶,有计划加吗
ffmpeg 编译为decoder.worker 方式和 源码 能 分享一下吗?
Duration: N/A, start: 0.010000, bitrate: N/A
Stream #0:0: Audio: aac (LC), 44100 Hz, 2.1, fltp, 1 kb/s
Stream #0:1: Video: h264 (High), yuv420p(progressive), 1280x720, 18 fps, 18 tbr, 1k tbn, 36 tbc
Is the source for the decoder.worker files available?
Before mentioning Issue, please send the operating system, browser and version, and debug information together. If there is a flv address that can be accessed from the Internet, it will be more perfect to save time and troubleshoot the problem. Thank you.
在提Issue之前,请把操作系统,浏览器和版本,和debug信息也一起发出来,假如有一个外网可以访问的flv地址那就更完美了,以节省时间并排查问题,谢谢。
操作系统
windows10
浏览器 Google Chrome
版本 88.0.4324.150(正式版本) (64 位)
FLV:
container: '.flvplayer-app',
url: 'https://bofang.672582.com/live/livestream/esl_csgo.flv',
decoder: './uncompiled/flvplayer-decoder-baseline.js',
debug: true,
live: true,
hasAudio: true,
width: 960,
height: 540,
audioChunk: 16 * 1024,
videoChunk: 1024 * 1024,
cache: true,
Before mentioning Issue, please send the operating system, browser and version, and debug information together. If there is a flv address that can be accessed from the Internet, it will be more perfect to save time and troubleshoot the problem. Thank you.
在提Issue之前,请把操作系统,浏览器和版本,和debug信息也一起发出来,假如有一个外网可以访问的flv地址那就更完美了,以节省时间并排查问题,谢谢。
设备: iPad Pro
版本: 13.5.1
代码:
let div = this.divContainer.get(url);
if (!div) {
div = document.createElement('div');
this.divContainer.set(url, div);
}
var flv = new FlvPlayer({
// Accept http url, websocket url, and file type
url: '/assets/images/weathering-with-you.flv',
// Accept dom element, dom selector
container: div,
// Video poster url
poster: '',
// Whether to print debug information
debug: true,
// Whether live mode
live: false,
// Whether the video loops, in non-live mode
loop: true,
// Whether to use hotkeys, if the control exists
hotkey: true,
// Whether to turn off the volume
muted: true,
// On the mobile side, try to activate the audio after the user touches the screen.
touchResume: false,
// Video chunk size, the default is 1M
videoChunk: 1024 * 1024,
// Audio chunk size, the default is 16kb
audioChunk: 16 * 1024,
// Whether to play automatically
autoPlay: true,
// Whether it contains an audio stream
hasAudio: false,
// Whether to cache the video frame to play
cache: true,
// Maximum time difference between audio and video, unit is ms
// used to automatically adjust audio and video synchronization
maxTimeDiff: 200,
// Whether to display the control, if the control exists
control: false,
// Indicates whether to do http fetching with cookies
withCredentials: true,
// Indicates total file size of media file, in bytes
filesize: Infinity,
// Indicates whether to enable CORS for http fetching
cors: true,
// Volume from 0 to 1, the default is 0.7
volume: 0.7,
// Initialize the frame rate, which will be covered by the actual frame rate of the file
frameRate: 30,
// Initialize the width, which will be covered by the actual width of the file
width: 1920,
// Initialize the height, which will be covered by the actual height of the file
height: 1080,
// Initialize http headers
headers: {},
// The path of the video decoder, currently optional flvplayer-decoder-baseline.js and flvplayer-decoder-multiple.js
decoder: 'assets/flvplayer-decoder-baseline.js',
});
flv.on('play', () => {
console.log('flv play');
})
} else {
console.warn('Your browser does not support Flvplayer.js');
}
打印:
2020-08-25 17:26:25.616521+0800 可视化终端[62420:2512690] WARN: Your browser does not support Flvplayer.js
2020-08-25 17:26:45.305129+0800 可视化终端[62420:2512690] WARN: Your browser does not support Flvplayer.js
2020-08-25 17:26:45.314879+0800 可视化终端[62420:2512690] WARN: Your browser does not support Flvplayer.js
2020-08-25 17:26:45.316417+0800 可视化终端[62420:2512690] WARN: Your browser does not support Flvplayer.js
上面的代码使用ionic打包在iPad上运行会提示不支持。这个是什么原因?
请问怎么将mp4转成flv? 可以给个ffmpeg命令吗?我试了一下,有的flv能正常播放,有的不能播放会崩溃,没有画面。请问对flv有什么要求吗?
自己写的demo也是一直在加载中,不报错,就是不显示视频画面,用你的线上演示版直接替换我的直播流地址,也是播放不了的,流的地址是有效的,两个解析方式都试了,都是一直在加载中,显示不出来画面
chrome
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
online:
FlvPlayer: [stream-type],Try use ReadableStream
liveStrem:
http://play.whca.org.cn/brand/48b2a766-f2f3-4c51-a23c-ec99737e5bd8.flv?auth_key=1597*****6-10734-0-********d42f6f1e157e54
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.