vue中使用video标签播放MP4,m3u8格式视频

参考:https://xiehao.blog.csdn.net/article/details/107109514

一,播放MP4视频

目录结构:

vue中使用video标签播放MP4,m3u8格式视频_第1张图片

二,播放m3u8格式视频

比如播放m3u8格式的监控摄像头的视频

首先安装

 cnpm i -S video.js
 cnpm i -S videojs-contrib-hls

在main.js文件中引入css 

//  main.js中引入css
import 'video.js/dist/video-js.css'

在使用的.Vue文件中,引入video.js和video-contrib-bls 

import videojs from 'video.js'
import 'videojs-contrib-hls'

src可以设置成动态修改 

注意:宽高设为具体的值

播放

export default {
    mounted() {
        videojs("my-video",
            function() {
            this.play();
        });
    }
};

效果图:

vue中使用video标签播放MP4,m3u8格式视频_第2张图片

你可能感兴趣的:(Vue2)