使用西瓜视频xgplayer播放MP4、m3u8、flv（直播、点播）；videojs

一. vue中使用xgplayer

1. 安装

npm install --save xgplayer 

2. 使用

<template>
	<div>
		<div ref="video" id="mmid"></div>
	</div>
</template>

<script type="text/ecmascript-6">
import Player from "xgplayer";
export default {
	data(){
		return{
			videoPlayer: null
		}
	},
	mounted() {
		this.getVideo()
	},
	methods: {
		getVideo(){
			this.videoPlayer = new Player({
		        el: document.querySelector("#mmid"),
		        url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
		        // url: 'http://192.168.10.215:8080/live/livestream.m3u8',
		        // url: "http://192.168.10.215:8080/live/livestream.flv",
		        width: "100%",
		        height: "240px",
		        volume: 0.6, // 初始音量
		        autoplay: true, // 自动播放
		        playsinline: true,
		        isLive: true,
		        cors: true
		      });
		}
	}
}
</script >

播放 m3u8 需要安装 npm install --save xgplayer-hls.js

<script type="text/ecmascript-6">
import HlsJsPlayer from "xgplayer-hls.js";
export default {
	data(){
		return{
			videoPlayer: null
		}
	},
	mounted() {
		this.getVideo()
	},
	methods: {
		getVideo(){
			this.videoPlayer = new HlsJsPlayer({
		        el: document.querySelector("#mmid"),
		        // url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
		        url: 'http://192.168.10.215:8080/live/livestream.m3u8',
		        // url: "http://192.168.10.215:8080/live/livestream.flv",
		        width: "100%",
		        height: "240px",
		        volume: 0.6, // 初始音量
		        autoplay: true, // 自动播放
		        playsinline: true,
		        isLive: true,
		        cors: true
		      });
		}
	}
}
</script >

播放http-flv 需要安装 npm install --save xgplayer-flv

<script type="text/ecmascript-6">
import FlvPlayer from "xgplayer-flv";
export default {
	data(){
		return{
			videoPlayer: null
		}
	},
	mounted() {
		this.getVideo()
	},
	methods: {
		getVideo(){
			this.videoPlayer = new FlvPlayer({
		        el: document.querySelector("#mmid"),
		        // url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
		        // url: 'http://192.168.10.215:8080/live/livestream.m3u8',
		        url: "http://192.168.10.215:8080/live/livestream.flv",
		        width: "100%",
		        height: "240px",
		        volume: 0.6, // 初始音量
		        autoplay: true, // 自动播放
		        playsinline: true,
		        isLive: true,
		        cors: true
		      });
		}
	}
}
</script >

参考官网：https://v2.h5player.bytedance.com/plugins/#definition

二. 使用videojs
videojs可以播放MP4、m3u8、不可以播放flv

1. 安装 npm install --save video.js
2. 使用

<template>
	<div>
		 <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay webkit-playsinline="true"
            playsinline="true"   style="width: 100%; height: 240px;" type="video/m3u8">
            <source id="source"
            
            src="http://192.168.10.215:8080/live/livestream.flv"
            type="application/x-mpegURL">
        </video>
	</div>
</template>

<script type="text/ecmascript-6">
import videojs from 'video.js'
export default {
	data(){
		return{
			videoPlayer: null
		}
	},
	mounted() {
		this.getVideo()
	},
	methods: {
		getVideo(){
			this.videoPlayer = videojs("myVideo",{
            autoplay: true,
            preload: 'auto',
            fluid: true, // 自适应宽高
            muted: true, // 是否静音
            // live: true

            controlBar: { // 设置控制条组件
                /* 设置控制条里面组件的相关属性及显示与否
                'currentTimeDisplay':true,
                'timeDivider':true,
                'durationDisplay':true,
                'remainingTimeDisplay':false,
                volumePanel: {
                inline: false,
                }
                
                */
                /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
                liveDisplay: true,
                children: [
                {name: 'playToggle'}, // 播放按钮
                // {name: 'currentTimeDisplay'}, // 当前已播放时间
                // {name: 'progressControl'}, // 播放进度条
                // {name: 'durationDisplay'}, // 总时间
                // { // 倍数播放
                //     name: 'playbackRateMenuButton',
                //     'playbackRates': [0.5, 1, 1.5, 2, 2.5]
                // },
                {
                    name: 'volumePanel', // 音量控制
                    inline: false, // 不使用水平方式
                },
                {name: 'FullscreenToggle'} // 全屏
                ]
            },
		}
	}
}
</script >