SOURCE

/**
 * npm 引入
 * npm install hs-player
 * import HSPlayer from 'hs-player'
 * Vue.use(HSPlayer)
 */

// script 引入
Vue.use(hsplayer.default)

new Vue({
    el: '#app',
    data() {
        return {
            text: 'hello world',
            mp4: {
                url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
                control: false,
                on: {
                    playing: function (evt) {
                        console.log('mp4 is playing')
                    }
                }
            },
            m3u8: {
                url: 'http://cdn.hsuanyuen.com/dev/2020/06/15/water/91a5597fbc6b547e7d91dac16ed18019.m3u8',
                title: '疯狂猜成语',
                autoPlay: true,
                crossOrigin: 'anonymous',
                contextMenu: ['about', 'capture',{title: 'hello', fun(){alert('hello')}}],
                enableSpeedSetting: true
            },
            live: {
                url: 'http://ivi.bupt.edu.cn/hls/cctv13.m3u8',
                title: 'CCTV-13',
                live: true,
                theme: '#d33332'
            }

        }
    }
})

<div id="app">
	<div class="player">
		<p>播放MP4且无控制栏</p>
		<div id="mp4" class="container">
			<hs-player :options="mp4"></hs-player>
		</div>
	</div>
	<div class="player">
		<p>播放M3U8（仅支持HLS编码）</p>
		<div id="m3u8" class="container">
			<hs-player :options="m3u8"></hs-player>
		</div>
	</div>
	<div class="player">
		<p>直播（仅支持HLS编码）</p>
		<div id="live" class="container">
			<hs-player :options="live"></hs-player>
		</div>
	</div>
</div>

.player{
    width: 600px;
    margin:  0 auto;
}
.player p{
    border-left: 4px solid #d33332;
    padding-left: 1em;
}
.player .container{
    width: 300px;
    margin: 0 auto;
}