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

项目文件结构:
vue引入flv.js并设置为全局_第1张图片
1.打开IDEA,在Terminal中输入 npm install --save flv.js 或者cmd打开命令提示符界面,在项目目录下输入。
vue引入flv.js并设置为全局_第2张图片
vue引入flv.js并设置为全局_第3张图片
2.安装完成后在项目的node_modules目录下会出现flv.js,记住flv.js/dist/flv.js目录,稍后会用到。
vue引入flv.js并设置为全局_第4张图片
3.在build文件夹中的webpack.base.conf.js,找到如下代码,添加红框中的代码;
vue引入flv.js并设置为全局_第5张图片

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并设置为全局_第6张图片

你可能感兴趣的:(菜鸟成长)