dev/dcp-web-gate/src_old/views/AddFeatures/ballot/videoInfo.vue

<template>
	 
	<div>
		<video-player
			class="vjs-custom-skin"
			ref="videoPlayer"
			:options="playerOptions"
			@ready="onPlayerReadied"
			@timeupdate="onTimeupdate"
			:playsinline="playsinline"
		>
		</video-player>
	</div>
</template>

<script>
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
require('videojs-contrib-hls/dist/videojs-contrib-hls.js')
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
export default {
	components: {
		videoPlayer,
	},
	name: '',
	data() {
		return {
			initialized: false,
			currentTech: '',
			streams: {
				rtmp: '',
				hls: '',
			},
			playerOptions: {
				fluid: true,
				muted: false,
				sources: [
					{
						type: 'application/x-mpegURL',
						src: 'https://pili-live-hls.nengapp.com/nenglive/formal_02.m3u8',
					},
				],
				notSupportedMessage: '此视频暂无法播放，请稍后再试',
				hls: true,
			},
		}
	},
	mounted() {},
	computed: {
		player() {
			return this.$refs.videoPlayer.player
		},
		currentStream() {
			return this.currentTech === 'Flash' ? 'RTMP' : 'HLS'
		},
		playsinline() {
			let ua = navigator.userAgent.toLocaleLowerCase()
			// x5内核
			if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
				return false
			} else {
				// ios端
				return true
			}
		},
	},
	methods: {
		onPlayerReadied() {
			if (!this.initialized) {
				this.initialized = true
				this.currentTech = this.player.techName_
			}
		},
		onTimeupdate(e) {
			console.log('currentTime', e.cache_.currentTime)
		},
	},
}
</script>

<style scoped></style>