播放flv格式视频

flv是一种文件极小、加载速度极快的流媒体格式视频,但有一个缺点是在苹果手机不能播放,苹果笔记本可以。

一、html内容

<video id="my-player"></video>

二、引入flv.js

<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>

三、js

var video = document.getElementById('my-player');
//判断当前浏览器是否支持播放
if (flvjs.isSupported()) {
	this.flvPlayer = flvjs.createPlayer({
		type: 'flv',
		url: "url"
	});
	this.flvPlayer.attachMediaElement(video);
	this.flvPlayer.load();  //加载数据流
	this.flvPlayer.play();  //播放数据流
} else {
	
}

四、其他方法

isLive: true,					//数据源是否为直播流
hasAudio: false,				//数据源是否包含有音频
hasVideo: true,					//数据源是否包含有视频
enableStashBuffer: false		//是否启用缓存区
this.flvPlayer.pause()//暂停播放数据流
this.flvPlayer.unload()//取消数据流加载
this.flvPlayer.detachMediaElement()//将播放实例从节点中取出
this.flvPlayer.destroy()//销毁播放实例
在Vue.js播放FLV格式视频并提供录制功能,你可以使用第三方库,如video.js和vue-flv-player,结合WebRTC技术实现录制功能。以下是一个基本步骤: 1. **安装依赖**: - 安装`video.js`作为视频播放的基础库:`npm install video.js` - 安装`vue-flv-player`用于支持FLV格式:`npm install vue-flv-player` 2. **引入并配置**: - 在项目入口文件(main.js 或者组件内部)引入并注册`video-js`和`vue-flv-player`插件。 ```javascript import 'video.js/dist/video-js.css' import Video from 'vue-flv-player' Vue.component('vueFlvPlayer', Video) ``` 3. **在组件中使用**: 创建一个Vue组件,将播放和录制逻辑放在其中: ```html <template> <div> <vueFlvPlayer :src="videoUrl" @ready="onPlayerReady"></vueFlvPlayer> <!-- 录制按钮 --> <button @click="startRecording">开始录制</button> <button @click="stopRecording" v-if="isRecording">停止录制</button> </div> </template> <script> export default { data() { return { videoUrl: 'your_flv_video_url', isRecording: false, mediaRecorder: null } }, methods: { onPlayerReady(player) { // 当播放器准备就绪时,可以添加更多事件监听器 player.on('pause', this.onPause); player.on('play', this.onResume); }, startRecording() { if (!this.isRecording) { // 初始化媒体记录器 this.mediaRecorder = new MediaRecorder(player.el); this.mediaRecorder.start(); this.isRecording = true; } }, stopRecording() { if (this.isRecording) { this.mediaRecorder.stop(); this.isRecording = false; // 保存录制好的blob const recordedData = this.mediaRecorder.dataURL; // 这里你需要将其发送到服务器或者其他地方存储 } }, onPause() { // 暂停时暂停录制 if (this.isRecording) { this.mediaRecorder.pause(); } }, onResume() { // 恢复时继续录制 if (this.isRecording) { this.mediaRecorder.resume(); } } } }; </script> ``` 4. **注意点**: - 录制功能需要用户的摄像头权限。确保你的应用请求了适当的权限。 - `MediaRecorder` API 可能受到浏览器兼容性的限制,确保测试在目标浏览器上是否正常工作。 - 保存和管理录制的blob数据(通常是base64编码的url)需配合后端服务。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值