vue引入flv.js并设置为全局

项目文件结构：

1.打开IDEA，在Terminal中输入 npm install –save flv.js 或者cmd打开命令提示符界面，在项目目录下输入。


2.安装完成后在项目的node_modules目录下会出现flv.js，记住flv.js/dist/flv.js目录，稍后会用到。

3.在build文件夹中的webpack.base.conf.js，找到如下代码，添加红框中的代码；

var webpack = require('webpack');

resolve: { 
   
    extensions: ['.js', '.vue', '.json'],
    alias: { 
   
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'flvjs':'flv.js/dist/flv.js'
    }
  },
  plugins: [
    new webpack.ProvidePlugin({ 
   
      flvjs:'flvjs'
    })
  ],

4.在main.js中添加

import flvjs from 'flvjs';
Vue.use(flvjs);

5.写测试页面
将一个可用的视频放到src的assests文件夹中命名为test.mp4，必须保证视频可用。

<template>
 <video
id="videoId"
controls = "true"
height="500"
width="auto">
</video>
</template>

<script>
    export default {
        name: "test",
      mounted(){
        if (flvjs.isSupported()){
          var videoElement = document.getElementById('videoId');
          var flvPlayer = flvjs.createPlayer({
            type: 'mp4',
            url: 'http://localhost:8081/static/media/2.d3c2577.mp4'
          });
          flvPlayer.attachMediaElement(videoElement);
          flvPlayer.load();
          // flvPlayer.play();
        }
      }
    }
</script>

如果不知道本地视频文件的url路径，先给video标签的属性src赋值，指向项目文件夹中视频文件的位置，运行该页面。在浏览器中右键，选择复制视频地址即可。

			<video
            id="videoElement"
            src="../../assets/2.mp4"
            controls = "true"
            class="microLesson"
            height="500"
            width="auto">

今天的文章vue引入flv.js并设置为全局分享到此就结束了，感谢您的阅读。