vue中使用原生的video播放flv和mp4格式的视频

本文主要是介绍vue中使用原生的video播放flv和mp4格式的视频，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

安装

npm i flv.js

html

<div class="video"><videov-if="videoId"controls id="videoElement"preload="metadata"><source  :type="`video/${allData.videoType}`" />您的浏览器不支持HTML5视频播放。</video>
</div>

js

<script>
import flvjs from 'flv.js';
export default {components: {},data() {return {flvPlayer:null,videoSrc:require('../assets/img/“二七”大罢工.mp4'),videoType:''}},mounted() {this.setupPlayer();},methods: {setupPlayer() {const videoElement = document.getElementById('videoElement');if (this.videoType === 'flv' && flvjs.isSupported()) {console.log(123456);// 使用 flv.js 播放 FLV 视频this.flvPlayer = flvjs.createPlayer({type: 'flv',url:this.videoSrc,});this.flvPlayer.attachMediaElement(videoElement);this.flvPlayer.load();// this.flvPlayer.play()} else {videoElement.src = this.videoSrc;videoElement.load();// videoElement.play();}},},
}
</script>

这篇关于vue中使用原生的video播放flv和mp4格式的视频的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---