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

最新推荐文章于 2024-08-27 16:58:03 发布

slom_fxt

最新推荐文章于 2024-08-27 16:58:03 发布

阅读量69

点赞数 1

分类专栏：工作中的积累文章标签： vue.js 音视频前端

本文链接：https://blog.csdn.net/slom_fxt/article/details/141605121

版权

工作中的积累专栏收录该内容

19 篇文章 3 订阅

订阅专栏

安装

npm i flv.js

html

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

<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>