前端播放flv的视频

问题: 项目需要播放 flv 格式的视频,原生 video 标签是不支持播放 flv 格式的视频的,
解决方式: 需要使用插件,我这里是使用的flv.js,下面是它的使用方法,官网是 flv地址
1.安装

npm install --save flv.js

2.使用(这里是在 vue 里面使用的)

<video id="videoElement">video>
<script>
import flvjs from "flv.js";
export default {
	mounted(){
		var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://example.com/flv/video.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
	}
}
script>

通过上面的操作,就可以播放 flv 的视频了,但是在播放过程中,还遇到了一个问题,就是会报跨域问题,这个问题需要运维配置,就不说了。

注意: flv 的格式经常是跟直播有关,但是如果网络协议是 rtmp,由于这个协议是需要 flash 的,现在谷歌等主流浏览器不支持flash,所以是无法播放的(前端任何方法都不行),这就需要后端进行处理。

你可能感兴趣的:(JS,前端,音视频,vue.js)