vue项目调用flv.js插件
vue项目调用flv.js插件，播放flv格式的视频，个别视频时间轴会出现时间不准确问题，一分钟左右的视频，却显示几千秒。插件版本也是最高，视频单独下载下来播放时间轴也是正确的，这个有知道怎么解决的吗
如果是个别不准确,应该是视频的时间戳有问题,检查一下视频文件的时间戳
参考以下，希望早点帮你解决问题
(1) vue 使用 flv.js 播放视频 https://juejin.cn/post/7050739831403446286
(2) wangdaodao/vue-flv-player: 基于flvjs封装的播放器 ... - GitHub. https://github.com/wangdaodao/vue-flv-player
(3) Vue实战中遇到的常见的问题总结(五)---flv.js - 掘金. https://juejin.cn/post/7086067157586411551
- 看下这篇博客，也许你就懂了，链接：vue+flv.js实现视频播放
- 除此之外, 这篇博客: vue项目中使用flvjs播放视频中的 播放失败原因 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
协议不支持
在一开始我以为flvjs可以播放所有flv格式的视频流，但是经过测试和查看文档发现，这个包仅支持HTTPFLV协议的流，如果使用RTMP协议的流则依然需要使用flash插件。支持：http://www.xxxxxxx.com:18080/11/22.flv
不支持：rtmp://www.xxxxx.com/api/6538-1.1567494734966.flv
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
在vue工程中使用flvJS
可以参考下
<video ref="videoElement"></video>
import flvjs from 'flv.js/dist/flv.min.js'
export default {
props: {
url: { type: String, default: '' },
type: { type: String, default: 'flv' },
isAutoPlay:{ type: Boolean, default: false },
height: { type: Number, default: 360 },
width: { type: Number, default: 100 },
poster: {type:String,default:"/image/index/logo.png"},
},
data() {
return {
flvPlayer: null
}
},
destroyed() {
this.destroyPlayer()
},
methods: {
play() {
if (this.url && flvjs.isSupported()) {
if (this.flvPlayer) {
this.destroyPlayer()
}
let videoElement = this.$refs.videoElement // document.getElementById("videoElement");
this.flvPlayer = flvjs.createPlayer(
{
type: this.type,
enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
isLive: true, //直播模式
hasAudio: false, //开启音频
hasVideo: true,
stashInitialSize: 128, //128
enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
url: this.url,
lazyLoad:false,
// lazyLoadMaxDuration:2,
reuseRedirectedURL:true,
// deferLoadAfterSourceOpen:true,
// rangeLoadZeroStart:true
//url: 'http://172.16.26.70:8082/live?srv=1&app=live&stream=cctv1',
//url:'http://player.alicdn.com/video/aliyunmedia.mp4',
}
)
flvjs.LoggingControl.enableInfo=false;
flvjs.LoggingControl.enableWar=false;
flvjs.LoggingControl.enableError=false;
this.flvPlayer.attachMediaElement(videoElement)
this.flvPlayer.load()
this.flvPlayer.play()
var $this=this;
//flv暂停监听
videoElement.addEventListener('pause', function () { //暂停开始执行的函数
let isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
if (!isFullScreen) {
console.log("暂停开始执行函数")
$this.destroyPlayer()
}
});
this.flvPlayer.on('error', err => {
Toast.fail("播放失败！")
// console.log('err', err);
$this.destroyPlayer()
});
}
},//只允许播放一个video
onlyPlayOne() {
var video = document.getElementsByTagName('video')
// 暂停函数
function pauseAll() {
var self = this
;[].forEach.call(video, function (i) {
// 将audios中其他的audio全部暂停
i !== self && i.pause()
})
}
// 给play事件绑定暂停函数
;[].forEach.call(video, function (i) {
i.addEventListener('play', pauseAll.bind(i))
})
},
//销毁flv player
destroyPlayer() {
if (this.flvPlayer) {
try{
this.flvPlayer.pause()
this.flvPlayer.unload()
this.flvPlayer.detachMediaElement()
this.flvPlayer.destroy(true)
this.flvPlayer = null
}catch(e){
//TODO handle the exception
}
}
} ,
//监听全屏
listenFullScreen() {
;['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange'].forEach((item, index) => {
window.addEventListener(item, function () {
let isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
if (isFullScreen) {
// 进入全屏
if (window.plus) {
plus.screen.lockOrientation('landscape-primary') //横屏
}
} else {
// 退出全屏
if (window.plus) {
plus.screen.lockOrientation('portrait-primary') //竖屏
}
}
})
})
},
}
}
</script>
FLV.js 支持一些特定的视频编码格式，例如 H.264。如果视频使用的编码格式不被 FLV.js 支持，可能会导致时间轴不准确。可以尝试将视频转换为 FLV.js 支持的编码格式，例如使用 FFmpeg 等工具进行转换。
或者考虑是否存在， FLV.js 和其他插件的兼容性问题。
或者，更换方案，使用Video.js、JW Player 等。这些插件或库支持更多的视频格式和特性。
源于chatGPT仅供参考
在使用flv.js插件播放FLV格式视频时，如果出现时间轴不准确的问题，可以尝试以下解决方法：
1. 确保视频的元数据信息正确：确保视频文件中的元数据信息（如时长、帧率等）与实际内容一致。有时候，视频文件可能包含错误或不完整的元数据，导致时间轴显示不准确。
2. 更新flv.js插件版本：尽管您提到已经使用最高版本的flv.js插件，但仍建议检查是否有新的更新版本可用，并尝试升级到最新版本。新版本可能修复了某些已知的时间轴问题。
3. 检查视频编码格式：某些视频编码格式可能与flv.js插件不兼容，导致时间轴显示不准确。请确保您的视频使用支持的编码格式，并尽量避免使用特殊或不常见的编码方式。
4. 调整视频播放参数：尝试调整flv.js插件的参数，比如`lazyLoad`、`customSeekHandler`等，以及视频标签本身的参数，如`preload`和`autoplay`等。有时这些参数的设置可能会影响到时间轴的准确性。
5. 使用其他视频播放器：如果问题仍然存在，可以考虑尝试其他的视频播放器库或方案，例如Video.js、HLS.js等，以查看是否能够解决时间轴不准确的问题。
请注意，以上解决方法仅供参考，并不能保证一定解决您的问题。建议您进一步调查和测试，可能需要与flv.js插件的开发者社区联系，以获取更具体和针对性的支持。
祝您成功解决问题！如果还有其他疑问，请随时提问。
在 Vue 项目中使用 flv.js 插件播放 FLV 格式的视频时出现时间轴不准确的问题可能是由于一些配置或使用方式不正确导致的。以下是一些可能的解决方法：
确保视频源正确：首先，请确保你提供给 flv.js 的视频源是正确的，并且视频文件本身没有问题。你可以尝试在其他播放器中播放相同的视频文件，以确认时间轴是否正确。
检查视频的 metadata：在播放 FLV 格式的视频时，flv.js 需要解析视频的 metadata 才能正确显示时间轴。请确保视频的 metadata 被正确解析，可以通过监听
metadata事件来检查：
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'your-video-url.flv'
});
flvPlayer.on(flvjs.Events.METADATA_ARRIVED, function () {
console.log('Metadata arrived:', flvPlayer.metadata);
});
flvPlayer.load();
- 检查时间单位：确保视频的时间单位正确。有时候，视频的时间单位可能与 flv.js 默认的时间单位不同，导致时间轴显示不准确。你可以尝试设置 flv.js 的
timeScale参数来匹配视频的时间单位：
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'your-video-url.flv',
// 设置时间单位
timeScale: 1000 // 如果视频的时间单位是毫秒，则设置为 1000
});
flvPlayer.load();
更新 flv.js 版本：确保你使用的是最新版本的 flv.js 插件。你可以检查 flv.js 的 GitHub 仓库，查看是否有相关的问题和修复。尝试升级到最新版本，看看问题是否得到解决。
调整视频编码参数：某些视频编码参数可能会影响时间轴的准确性。你可以尝试调整视频的编码参数，如帧率、关键帧间隔等，以观察是否对时间轴准确性有影响。
以下答案参考newbing,回答由博主波罗歌编写：
你遇到的问题可能是由于视频的元数据信息不准确导致的。您可以尝试以下解决方案：
确保视频的元数据正确：使用第三方工具（例如FFmpeg）检查你的视频文件的元数据信息。检查视频的时长、帧率等是否准确。
尝试修改flv.js的配置选项：flv.js提供了一些配置选项，可以修改解码器的行为。您可以尝试使用
enableStashBuffer属性来提供更准确的时间轴信息。例如：
flvPlayer.load();
// 在flv.js的初始化之后添加以下代码
flvPlayer.on(flvjs.Events.MEDIA_INFO, function (info) {
// 设置允许缓存的时间范围
flvPlayer.config.enableStashBuffer = false;
});
- 确认视频播放器的配置：在使用flv.js的过程中，确保播放器的配置正确。特别是要检查是否正确设置了
duration属性，以便播放器能够正确地计算视频的总时长。
如果上述解决方案仍然不能解决您的问题，请提供更多的代码和详细的复现步骤，以便更好地帮助您解决问题。
如果我的回答解决了您的问题，请采纳！
可能是由于视频的元数据（metadata）不正确导致的。元数据是视频文件中包含有关视频内容的信息，包括视频的时长、编码格式、帧率等。
- 使用一些视频编辑工具（如FFmpeg或MediaInfo）检查视频文件的元数据是否正确。确保视频的时长是正确的，以及其他元数据与实际视频内容匹配。
- 尝试更新或切换使用的FLV播放器插件，确保使用的是最新版本。有时，播放器本身可能存在一些bug或问题，更新版本可能会修复这些问题。
- 在编码视频时，使用正确的参数可以确保生成正确的元数据。请确保在编码视频时使用了正确的帧率、时长和其他相关参数。
- ，可以尝试使用其他格式的视频（如MP4、WebM等）来代替FLV格式。这些格式在大多数现代浏览器中都有更好的兼容性和支持。
你遇到的问题可能是由于视频的元数据解析错误导致的。这可能是由于插件在解析视频元数据时出现了一些问题。以下是一些可能解决此问题的方法：
确保你正在使用最新版本的flv.js插件。更新插件版本可能会修复一些已知的问题。
检查视频文件是否损坏。将视频文件单独下载下来并确保它可以正常播放。如果视频文件在单独下载时正常，但在Vue项目中播放时出现问题，那么问题可能出现在flv.js插件的使用方式或设置上。
尝试使用其他视频格式。如果只有部分视频出现问题，可能是flv格式的相关问题。你可以尝试将视频转换为其他格式，如MP4，然后再次尝试在Vue项目中播放。
查看flv.js的文档和社区讨论。可能有其他人碰到了类似的问题，你可以在插件的文档页面或相关论坛中搜索这个问题，看看有没有解决方案或建议。
如果上述方法都无法解决你的问题，建议你提供更详细的信息，例如具体的错误消息、代码片段等，以便我们更好地理解问题并提供帮助。