|
|
@@ -1,829 +0,0 @@
|
|
|
-<template>
|
|
|
- <div ref="videoPlayerWrapper"
|
|
|
- class="vPlayer">
|
|
|
- <video ref="videoPlayer"
|
|
|
- dir="ltr"
|
|
|
- class="video-js vjs-fluid vjs-big-play-centered vjs-show-big-play-button-on-pause"
|
|
|
- controls
|
|
|
- preload="none">
|
|
|
- <p class="vjs-no-js">
|
|
|
- To view this video please enable JavaScript, and consider upgrading to a web browser that
|
|
|
- <a href="https://videojs.com/html5-video-support/"
|
|
|
- target="_blank">
|
|
|
- supports HTML5 video
|
|
|
- </a>
|
|
|
- </p>
|
|
|
- </video>
|
|
|
-
|
|
|
- <div class="VastElements">
|
|
|
- <div ref="VastTimerBtn"
|
|
|
- class="VastElement VastTimerBtn hide" />
|
|
|
- <div ref="VastSkipAdBtn"
|
|
|
- class="VastElement VastSkipAdBtn hide">
|
|
|
- رد کردن
|
|
|
- </div>
|
|
|
- <div ref="VastLinkBtn"
|
|
|
- class="VastElement VastLinkBtn hide">
|
|
|
- اطلاعات بیشتر
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div v-if="useOverPlayer && !isInVastMode"
|
|
|
- ref="overPlayer"
|
|
|
- class="over-player-wrapper">
|
|
|
- <q-btn icon-right="isax:menu-1"
|
|
|
- size="sm"
|
|
|
- color="primary"
|
|
|
- class="toggleSideBarBtn"
|
|
|
- @click="toggleSideBar" />
|
|
|
- <div class="over-player-slot"
|
|
|
- :class="{'show': localOverPlayer, 'hide': !localOverPlayer}"
|
|
|
- :style="{width: overPlayerWidth}">
|
|
|
- <slot name="overPlayer" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import videojs from 'video.js'
|
|
|
-import 'videojs-hls-quality-selector'
|
|
|
-import videojsBrand from 'videojs-brand'
|
|
|
-import fa from 'video.js/dist/lang/fa.json'
|
|
|
-import { APIGateway } from 'src/api/APIGateway.js'
|
|
|
-// import { mixinAbrisham } from 'src/mixin/Mixins.js'
|
|
|
-import { PlayerSourceList } from 'src/models/PlayerSource.js'
|
|
|
-import videoJsResolutionSwitcher from 'src/assets/js/videoJsResolutionSwitcher.js'
|
|
|
-
|
|
|
-// https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8 (Live)
|
|
|
-// https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'VideoPlayer',
|
|
|
- // mixins: [mixinAbrisham],
|
|
|
- props: {
|
|
|
- hasVast: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- source: {
|
|
|
- type: [String, PlayerSourceList],
|
|
|
- default: null
|
|
|
- },
|
|
|
- useOverPlayer: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- poster: {
|
|
|
- type: String,
|
|
|
- default () {
|
|
|
- return ''
|
|
|
- }
|
|
|
- },
|
|
|
- overPlayer: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- overPlayerWidth: {
|
|
|
- type: String,
|
|
|
- default: '100%'
|
|
|
- },
|
|
|
- keepCalculating: {
|
|
|
- type: Boolean,
|
|
|
- default () {
|
|
|
- return true
|
|
|
- }
|
|
|
- },
|
|
|
- bookmarkLoading: {
|
|
|
- type: Boolean,
|
|
|
- default () {
|
|
|
- return false
|
|
|
- }
|
|
|
- },
|
|
|
- currentTimed: {
|
|
|
- type: Number
|
|
|
- }
|
|
|
- },
|
|
|
- emits: ['seeked', 'adStarted', 'update:sideBar'],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- needReInitVideo: false,
|
|
|
- isInVastMode: false,
|
|
|
- vastSrc: null,
|
|
|
- vastLink: null,
|
|
|
- vastSkipOffset: null,
|
|
|
- vastStartOffset: null,
|
|
|
- vastTimerInterval: null,
|
|
|
- width: '',
|
|
|
- showVastElements: false,
|
|
|
- drawer: false,
|
|
|
- player: null,
|
|
|
- localOverPlayer: true,
|
|
|
- favLoading: false,
|
|
|
- options: {
|
|
|
- myItems: [{
|
|
|
- name: 'test'
|
|
|
- }],
|
|
|
- controlBar: {
|
|
|
- // currentTimeDisplay: true,
|
|
|
- TimeDivider: true,
|
|
|
- children: [
|
|
|
- 'playToggle',
|
|
|
- 'PlaybackRateMenuButton',
|
|
|
- 'CurrentTimeDisplay',
|
|
|
- 'progressControl',
|
|
|
- 'TimeDivider',
|
|
|
- 'RemainingTimeDisplay',
|
|
|
- 'volumePanel',
|
|
|
- 'SubtitlesButton',
|
|
|
- 'QualitySelector',
|
|
|
- 'fullscreenToggle',
|
|
|
- 'PictureInPictureToggle'
|
|
|
- ],
|
|
|
- volumePanel: {
|
|
|
- inline: true,
|
|
|
- vertical: true
|
|
|
- }
|
|
|
- },
|
|
|
- language: 'fa',
|
|
|
- languages: {
|
|
|
- fa
|
|
|
- },
|
|
|
- responsive: true,
|
|
|
- autoplay: false,
|
|
|
- controls: true,
|
|
|
- playbackRates: [0.5, 1, 1.5, 2, 3, 4],
|
|
|
- nativeControlsForTouch: false,
|
|
|
- sources: [],
|
|
|
- poster: null,
|
|
|
- plugins: {
|
|
|
- // hotkeys: {
|
|
|
- // enableModifiersForNumbers: false,
|
|
|
- // seekStep: 5,
|
|
|
- // enableMute: true,
|
|
|
- // enableVolumeScroll: true,
|
|
|
- // enableHoverScroll: true,
|
|
|
- // enableFullscreen: true
|
|
|
- // }
|
|
|
- }
|
|
|
- },
|
|
|
- videoIsPlaying: false,
|
|
|
- postIsFavored: {}
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- calcTheHeight() {
|
|
|
- return '100%'
|
|
|
- },
|
|
|
- calcTheWidth() {
|
|
|
- return '100%'
|
|
|
- },
|
|
|
- currentTime() {
|
|
|
- return this.currentTimed
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- source: {
|
|
|
- handler () {
|
|
|
- if (typeof window === 'undefined') {
|
|
|
- return
|
|
|
- }
|
|
|
- this.$nextTick(() => {
|
|
|
- if (this.$refs.videoPlayer) {
|
|
|
- this.reInitVideo()
|
|
|
- } else {
|
|
|
- this.needReInitVideo = true
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- immediate: true
|
|
|
- },
|
|
|
- currentTime(time) {
|
|
|
- this.player.currentTime(time)
|
|
|
- },
|
|
|
- overPlayer(newValue) {
|
|
|
- this.localOverPlayer = newValue
|
|
|
- },
|
|
|
- useOverPlayer (newValue) {
|
|
|
- if (!newValue) {
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- this.$nextTick(() => {
|
|
|
- this.moveSideBarElementIntoVideoPlayerElements()
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.width = this.overPlayerWidth
|
|
|
- this.setPoster()
|
|
|
- this.setSources()
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- if (this.needReInitVideo) {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.reInitVideo()
|
|
|
- })
|
|
|
- }
|
|
|
- if (this.useOverPlayer) {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.moveSideBarElementIntoVideoPlayerElements()
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- beforeUnmount() {
|
|
|
- if (this.player) {
|
|
|
- this.player.dispose()
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getVast () {
|
|
|
- return APIGateway.vast.getXml()
|
|
|
- .then((vastXml) => {
|
|
|
- this.loadVast(vastXml)
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- })
|
|
|
- },
|
|
|
- showVastElement (vastClassName) {
|
|
|
- this.removeVastClass(vastClassName, 'hide')
|
|
|
- this.addVastClass(vastClassName, 'show')
|
|
|
- },
|
|
|
- hideVastElement (vastClassName) {
|
|
|
- this.removeVastClass(vastClassName, 'show')
|
|
|
- this.addVastClass(vastClassName, 'hide')
|
|
|
- },
|
|
|
- addVastClass (vastClassName, classValue) {
|
|
|
- const vastElement = this.vastElementExist(vastClassName)
|
|
|
- if (!vastElement) {
|
|
|
- return false
|
|
|
- }
|
|
|
-
|
|
|
- vastElement.classList.add(classValue)
|
|
|
- },
|
|
|
- removeVastClass (vastClassName, classValue) {
|
|
|
- const vastElement = this.vastElementExist(vastClassName)
|
|
|
- if (!vastElement) {
|
|
|
- return false
|
|
|
- }
|
|
|
-
|
|
|
- vastElement.classList.remove(classValue)
|
|
|
- },
|
|
|
- vastElementExist (vastClassName) {
|
|
|
- const vastElement = this.$refs.videoPlayerWrapper.getElementsByClassName(vastClassName)[0]
|
|
|
- if (!vastElement) {
|
|
|
- return false
|
|
|
- }
|
|
|
-
|
|
|
- return vastElement
|
|
|
- },
|
|
|
- loadVastDomElements () {
|
|
|
- this.injectDomeElement(this.$refs.VastTimerBtn)
|
|
|
- this.injectDomeElement(this.$refs.VastSkipAdBtn)
|
|
|
- this.injectDomeElement(this.$refs.VastLinkBtn)
|
|
|
- },
|
|
|
- showVastLinkBtn (link, title = 'اطلاعات بیشتر') {
|
|
|
- this.showVastElement('VastLinkBtn')
|
|
|
- this.updateVastElementInnerHTML('VastLinkBtn', '<a href="' + link + '" target="_blank">' + title + '</a>')
|
|
|
- },
|
|
|
- stopVastTimer () {
|
|
|
- if (this.vastTimerInterval) {
|
|
|
- clearInterval(this.vastTimerInterval)
|
|
|
- }
|
|
|
- this.updateVastTimer(0)
|
|
|
- this.hideVastElement('VastTimerBtn')
|
|
|
- },
|
|
|
- startVastTimer (endTimerCallback) {
|
|
|
- this.showVastElement('VastTimerBtn')
|
|
|
- if (this.vastTimerInterval) {
|
|
|
- clearInterval(this.vastTimerInterval)
|
|
|
- }
|
|
|
- let seconds = this.getVastTimerSeconds()
|
|
|
- if (seconds === 0) {
|
|
|
- this.stopVastTimer()
|
|
|
- return
|
|
|
- }
|
|
|
- this.updateVastTimer(seconds--)
|
|
|
- this.vastTimerInterval = setInterval(() => {
|
|
|
- this.updateVastTimer(seconds--)
|
|
|
- if (seconds < 0) {
|
|
|
- this.stopVastTimer()
|
|
|
- endTimerCallback()
|
|
|
- }
|
|
|
- }, 1000)
|
|
|
- },
|
|
|
- getVastTimerSeconds () {
|
|
|
- if (!this.vastSkipOffset) {
|
|
|
- return 0
|
|
|
- }
|
|
|
-
|
|
|
- const array = this.vastSkipOffset.split(':')
|
|
|
- return (array[0] * 60 * 60) + (array[1] * 60) + array[2]
|
|
|
- },
|
|
|
- updateVastTimer (timer) {
|
|
|
- this.updateVastElementInnerHTML('VastTimerBtn', timer + ' ثانیه')
|
|
|
- },
|
|
|
- updateVastElementInnerHTML (vastClassName, innerHTML) {
|
|
|
- const vastElement = this.vastElementExist(vastClassName)
|
|
|
- if (!vastElement) {
|
|
|
- return false
|
|
|
- }
|
|
|
-
|
|
|
- vastElement.innerHTML = innerHTML
|
|
|
- },
|
|
|
- sowVastSkipAdBtn () {
|
|
|
- const vastClassName = 'VastSkipAdBtn'
|
|
|
- this.showVastElement(vastClassName)
|
|
|
- const vastElement = this.vastElementExist(vastClassName)
|
|
|
- if (!vastElement) {
|
|
|
- return false
|
|
|
- }
|
|
|
- vastElement.addEventListener('click', (event) => {
|
|
|
- this.endVast()
|
|
|
- })
|
|
|
- },
|
|
|
- loadVast (vastXml) {
|
|
|
- const parser = new DOMParser()
|
|
|
- const xmlDoc = parser.parseFromString(vastXml, 'text/xml')
|
|
|
- this.vastSrc = xmlDoc.getElementsByTagName('MediaFile')[0].childNodes[0].nodeValue
|
|
|
- this.vastLink = xmlDoc.getElementsByTagName('ClickThrough')[0].childNodes[0].nodeValue
|
|
|
- this.vastStartOffset = xmlDoc.getElementsByTagName('Linear')[0].getAttribute('startoffset')
|
|
|
- this.vastSkipOffset = xmlDoc.getElementsByTagName('Linear')[0].getAttribute('skipoffset')
|
|
|
-
|
|
|
- this.player.addClass('vjs-ad-playing')
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- this.isInVastMode = true
|
|
|
- const playerSourceList = new PlayerSourceList([{
|
|
|
- src: this.vastSrc,
|
|
|
- type: 'video/mp4',
|
|
|
- label: 'کیفیت عالی',
|
|
|
- caption: 'کیفیت عالی',
|
|
|
- link: this.vastSrc,
|
|
|
- res: 720,
|
|
|
- selected: false
|
|
|
- }])
|
|
|
- const source = this.isPlayerSourceList() ? playerSourceList.list : this.vastSrc
|
|
|
- this.player.src(source)
|
|
|
- }, 100)
|
|
|
-
|
|
|
- this.player.one('play', () => {
|
|
|
- this.player.controlBar.progressControl.disable()
|
|
|
- this.loadVastDomElements()
|
|
|
-
|
|
|
- this.showVastLinkBtn(this.vastLink)
|
|
|
- this.startVastTimer(() => {
|
|
|
- this.sowVastSkipAdBtn()
|
|
|
- })
|
|
|
-
|
|
|
- this.$emit('adStarted')
|
|
|
- })
|
|
|
- this.player.one('ended', () => {
|
|
|
- if (!this.isInVastMode) {
|
|
|
- return
|
|
|
- }
|
|
|
- this.endVast()
|
|
|
- })
|
|
|
- },
|
|
|
- startVast (vastXml) {
|
|
|
- const parser = new DOMParser()
|
|
|
- const xmlDoc = parser.parseFromString(vastXml, 'text/xml')
|
|
|
- this.vastSrc = xmlDoc.getElementsByTagName('MediaFile')[0].childNodes[0].nodeValue
|
|
|
- this.vastLink = xmlDoc.getElementsByTagName('ClickThrough')[0].childNodes[0].nodeValue
|
|
|
- this.vastStartOffset = xmlDoc.getElementsByTagName('Linear')[0].getAttribute('startoffset')
|
|
|
- this.vastSkipOffset = xmlDoc.getElementsByTagName('Linear')[0].getAttribute('skipoffset')
|
|
|
-
|
|
|
- // in a real plugin, you might fetch ad inventory here
|
|
|
- this.player.trigger('adsready')
|
|
|
- },
|
|
|
- endVast () {
|
|
|
- this.isInVastMode = false
|
|
|
- this.player.controlBar.progressControl.enable()
|
|
|
- this.hideVastElement('VastTimerBtn')
|
|
|
- this.hideVastElement('VastSkipAdBtn')
|
|
|
- this.hideVastElement('VastLinkBtn')
|
|
|
- this.player.removeClass('vjs-ad-playing')
|
|
|
- // setTimeout(() => {
|
|
|
- this.setPoster()
|
|
|
- this.setSources()
|
|
|
- const source = this.isPlayerSourceList() ? this.source.list : this.source
|
|
|
- this.player.src(source)
|
|
|
- this.player.poster(this.poster)
|
|
|
- // this.player.reset()
|
|
|
- this.player.play()
|
|
|
- // }, 100)
|
|
|
- this.$emit('adEnded')
|
|
|
- },
|
|
|
-
|
|
|
- focusOnPlayer () {
|
|
|
- this.player.el().focus()
|
|
|
- },
|
|
|
- setPlayerBrand () {
|
|
|
- this.player.brand({
|
|
|
- image: 'https://nodes.alaatv.com/upload/landing/chatr/alaa%20logo.png?w=30&h=30',
|
|
|
- title: 'پالیزوانی',
|
|
|
- destination: '/',
|
|
|
- destinationTarget: '_blank'
|
|
|
- })
|
|
|
- },
|
|
|
- redefineTap () {
|
|
|
- this.player.on('touchend', function(e) { // tap
|
|
|
- if (this.player().controls()) {
|
|
|
- const classes = [
|
|
|
- 'vjs-tech'
|
|
|
- ]
|
|
|
- const canDoAction = !classes.find(className => e.target.classList.contains(className))
|
|
|
- if (canDoAction) {
|
|
|
- return
|
|
|
- }
|
|
|
- if (this.player().paused()) {
|
|
|
- this.player().play()
|
|
|
- } else {
|
|
|
- this.player().pause()
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- hasPlugin (pluginName) {
|
|
|
- return Object.keys(videojs.getPlugins()).includes(pluginName)
|
|
|
- },
|
|
|
- initPlayer (withVast) {
|
|
|
- if (!this.hasPlugin('brand')) {
|
|
|
- videojs.registerPlugin('brand', videojsBrand)
|
|
|
- }
|
|
|
- // if (this.isPlayerSourceList(this.source) && !this.hasPlugin('videoJsResolutionSwitcher')) { // old multiple quality type
|
|
|
- if (this.isPlayerSourceList(this.source)) { // old multiple quality type
|
|
|
- videoJsResolutionSwitcher(videojs)
|
|
|
- this.options.plugins.videoJsResolutionSwitcher = {
|
|
|
- default: 'کیفیت بالا',
|
|
|
- dynamicLabel: true
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- this.player = videojs(this.$refs.videoPlayer, this.options)
|
|
|
- if (this.hasVast && (typeof withVast === 'undefined' || withVast === true)) {
|
|
|
- // this.loadVast()
|
|
|
- this.getVast()
|
|
|
- }
|
|
|
-
|
|
|
- this.player.ready(() => {
|
|
|
- this.setPlayerBrand()
|
|
|
- this.focusOnPlayer()
|
|
|
- this.redefineTap()
|
|
|
- // this.on('timeupdate', function () {
|
|
|
- // if (that.keepCalculating) {
|
|
|
- // that.calcWatchedPercentage(this.currentTime(), this.duration())
|
|
|
- // }
|
|
|
- // // document.querySelector('.video-js').focus()
|
|
|
- // if (that.$refs.videoPlayer) {
|
|
|
- // that.$refs.videoPlayer.focus()
|
|
|
- // }
|
|
|
-
|
|
|
- // if (!that.player.paused() && !that.player.userActive()) {
|
|
|
- // that.videoStatus(false)
|
|
|
- // } else if (!that.player.paused()) {
|
|
|
- // that.videoStatus(true)
|
|
|
- // }
|
|
|
- // })
|
|
|
- })
|
|
|
-
|
|
|
- if (typeof this.source === 'string' && this.source.includes('.m3u8')) { // hls type
|
|
|
- this.player.hlsQualitySelector()
|
|
|
- }
|
|
|
-
|
|
|
- this.player.on('seeked', () => {
|
|
|
- this.$emit('seeked', this.player.currentTime())
|
|
|
- })
|
|
|
-
|
|
|
- // const events = [
|
|
|
- // 'loadstart',
|
|
|
- // 'progress',
|
|
|
- // 'suspend',
|
|
|
- // 'abort',
|
|
|
- // 'error',
|
|
|
- // 'emptied',
|
|
|
- // 'stalled',
|
|
|
- // 'loadedmetadata',
|
|
|
- // 'loadeddata',
|
|
|
- // 'canplay',
|
|
|
- // 'canplaythrough',
|
|
|
- // 'playing',
|
|
|
- // 'waiting',
|
|
|
- // 'seeking',
|
|
|
- // 'seeked',
|
|
|
- // 'ended',
|
|
|
- // 'durationchange',
|
|
|
- // 'timeupdate',
|
|
|
- // 'play',
|
|
|
- // 'pause',
|
|
|
- // 'ratechange',
|
|
|
- // 'resize',
|
|
|
- // 'volumechange'
|
|
|
- // ]
|
|
|
- //
|
|
|
- // events.forEach(event => {
|
|
|
- // this.player.on(event, () => {
|
|
|
- // console.log('event: ', event)
|
|
|
- // console.log('sources: ', this.player.sources)
|
|
|
- // })
|
|
|
- // })
|
|
|
- },
|
|
|
- changeCurrentTime (time) {
|
|
|
- if (!this.player) {
|
|
|
- return
|
|
|
- }
|
|
|
- this.player.currentTime(time)
|
|
|
- },
|
|
|
- injectDomeElement (element) {
|
|
|
- this.$refs.videoPlayerWrapper.querySelector('.video-js').appendChild(element)
|
|
|
- },
|
|
|
- createDomeElement (elementClass, refKey) {
|
|
|
- const div = document.createElement('div')
|
|
|
- div.classList = elementClass
|
|
|
- const child = this.$refs[refKey].$el ? this.$refs[refKey].$el : this.$refs[refKey]
|
|
|
- div.appendChild(child)
|
|
|
- this.$refs.videoPlayerWrapper.querySelector('.video-js').appendChild(div)
|
|
|
- },
|
|
|
- moveSideBarElementIntoVideoPlayerElements () {
|
|
|
- this.createDomeElement('over-player-wrapper-div', 'overPlayer')
|
|
|
- },
|
|
|
- toggleSideBar () {
|
|
|
- this.localOverPlayer = !this.localOverPlayer
|
|
|
- // this.$emit('update:sideBar', this.localOverPlayer)
|
|
|
- },
|
|
|
- activate(time) {
|
|
|
- this.player.currentTime(time)
|
|
|
- this.player.play()
|
|
|
- const requiredElement = document.querySelector('.video-js')
|
|
|
- requiredElement.focus()
|
|
|
- },
|
|
|
- setSources(sources) {
|
|
|
- this.options.sources = sources || (this.isPlayerSourceList() ? this.source.list : this.source)
|
|
|
- },
|
|
|
- setPoster(poster) {
|
|
|
- this.options.poster = poster || this.poster
|
|
|
- },
|
|
|
- reInitVideo(withVast) {
|
|
|
- if (this.player?.reset) {
|
|
|
- this.player.reset()
|
|
|
- }
|
|
|
- // this.player.dispose()
|
|
|
- this.setPoster()
|
|
|
- this.setSources()
|
|
|
- this.initPlayer(withVast)
|
|
|
- const source = this.isPlayerSourceList() ? this.source.list : this.source
|
|
|
- this.player.src(source)
|
|
|
- this.player.poster(this.poster)
|
|
|
- },
|
|
|
- isPlayerSourceList () {
|
|
|
- return (this.source && this.source.list && Array.isArray(this.source.list))
|
|
|
- },
|
|
|
- calcWatchedPercentage(currentTime, duration) {
|
|
|
- const watchedPercentage = ((currentTime / duration) * 100)
|
|
|
- const videoPlayerTimeData = {
|
|
|
- currentTime,
|
|
|
- duration,
|
|
|
- watchedPercentage
|
|
|
- }
|
|
|
- this.$emit('calcTimeData', videoPlayerTimeData)
|
|
|
- },
|
|
|
- videoStatus(val) {
|
|
|
- this.videoIsPlaying = val
|
|
|
- },
|
|
|
- toggleFullScreen() {
|
|
|
- if (document.exitFullscreen) {
|
|
|
- document.exitFullscreen()
|
|
|
- } else if (document.webkitExitFullscreen) { /* Safari */
|
|
|
- document.webkitExitFullscreen()
|
|
|
- } else if (document.msExitFullscreen) { /* IE11 */
|
|
|
- document.msExitFullscreen()
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-@import "video.js/dist/video-js.css";
|
|
|
-.vPlayer {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: contents;
|
|
|
- .VastElements {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .VastElement {
|
|
|
- position: absolute;
|
|
|
- bottom: 60px;
|
|
|
- height: 50px;
|
|
|
- border: solid 2px $primary;
|
|
|
- border-radius: 8px;
|
|
|
- background: rgba(0, 0, 0, 0.3);
|
|
|
- display: flex;
|
|
|
- flex-flow: row;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 1s;
|
|
|
- $width: 150px;
|
|
|
- &.VastTimerBtn {
|
|
|
- border-top-right-radius: 0;
|
|
|
- border-bottom-right-radius: 0;
|
|
|
- border-right: none;
|
|
|
- width: $width;
|
|
|
- cursor: not-allowed;
|
|
|
- &.show {
|
|
|
- right: 0;
|
|
|
- }
|
|
|
- &.hide {
|
|
|
- right: -$width;
|
|
|
- }
|
|
|
- }
|
|
|
- &.VastSkipAdBtn {
|
|
|
- right: 0;
|
|
|
- border-top-right-radius: 0;
|
|
|
- border-bottom-right-radius: 0;
|
|
|
- border-right: none;
|
|
|
- width: $width;
|
|
|
- color: white;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 0.8rem;
|
|
|
- &.show {
|
|
|
- right: 0;
|
|
|
- }
|
|
|
- &.hide {
|
|
|
- right: -$width;
|
|
|
- }
|
|
|
- }
|
|
|
- &.VastLinkBtn {
|
|
|
- left: 0;
|
|
|
- border-top-left-radius: 0;
|
|
|
- border-bottom-left-radius: 0;
|
|
|
- border-left: none;
|
|
|
- width: $width;
|
|
|
- &.show {
|
|
|
- left: 0;
|
|
|
- }
|
|
|
- &.hide {
|
|
|
- left: -$width;
|
|
|
- }
|
|
|
- a {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- color: white;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 0.8rem;
|
|
|
- }
|
|
|
- }
|
|
|
- @media screen and (max-width: 600px) {
|
|
|
- height: 35px;
|
|
|
- $screen-max-600-width: 100px;
|
|
|
- &.VastTimerBtn {
|
|
|
- width: $screen-max-600-width;
|
|
|
- font-size: 0.7rem;
|
|
|
- &.hide {
|
|
|
- left: -$screen-max-600-width;
|
|
|
- }
|
|
|
- }
|
|
|
- &.VastSkipAdBtn {
|
|
|
- width: $screen-max-600-width;
|
|
|
- font-size: 0.7rem;
|
|
|
- &.hide {
|
|
|
- left: -$screen-max-600-width;
|
|
|
- }
|
|
|
- }
|
|
|
- &.VastLinkBtn {
|
|
|
- width: $screen-max-600-width;
|
|
|
- &.hide {
|
|
|
- right: -$screen-max-600-width;
|
|
|
- }
|
|
|
- a {
|
|
|
- font-size: 0.7rem;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .over-player-wrapper-div {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- height: 100%;
|
|
|
- z-index: 1;
|
|
|
- .over-player-wrapper {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- height: 100%;
|
|
|
- .over-player-slot {
|
|
|
- left: 2000px;
|
|
|
- height: 100%;
|
|
|
- color: initial;
|
|
|
- transition: 0.4s;
|
|
|
- direction: ltr;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- &.show {
|
|
|
- right: 0;
|
|
|
- }
|
|
|
- &.hide {
|
|
|
- width: 0 !important;
|
|
|
- right: 2500px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .toggleSideBarBtn {
|
|
|
- position: absolute;
|
|
|
- top: 5px;
|
|
|
- left: 5px;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
- .video-js {
|
|
|
- overflow: hidden;
|
|
|
- background-color: transparent;
|
|
|
- &.vjs-ad-playing {
|
|
|
- .vjs-resolution-button {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- .vjs-loading-spinner {
|
|
|
- right: 50%;
|
|
|
- margin: -25px -25px 0 0;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- .vjs-big-play-button {
|
|
|
- color: white;
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- border-radius: 100%;
|
|
|
- background: $primary;
|
|
|
- border-color: $primary;
|
|
|
-
|
|
|
- @media screen and (max-width: 600px) {
|
|
|
- margin-top: -60px;
|
|
|
- }
|
|
|
- .vjs-icon-placeholder:before {
|
|
|
- display: flex;
|
|
|
- font-size: 65px;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- }
|
|
|
- .vjs-control-bar {
|
|
|
- z-index: 2;
|
|
|
- .vjs-volume-panel {
|
|
|
- .vjs-volume-control {
|
|
|
- // right: -3.5em;
|
|
|
- // margin-right: -1px;
|
|
|
- }
|
|
|
- }
|
|
|
- .vjs-resolution-button {
|
|
|
- .vjs-menu-button {
|
|
|
- .vjs-icon-placeholder {
|
|
|
- &:before {
|
|
|
- content: "\f114";
|
|
|
- font-style: normal;
|
|
|
- font-weight: normal;
|
|
|
- font-family: VideoJS, Arial, serif;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .vjs-play-progress {
|
|
|
- &:before {
|
|
|
- /*rtl:ignore*/
|
|
|
- right: -0.5em;
|
|
|
- /*rtl:ignore*/
|
|
|
- left: auto;
|
|
|
- }
|
|
|
- }
|
|
|
- .vjs-volume-tooltip {
|
|
|
- float: right;
|
|
|
- }
|
|
|
- .vjs-volume-level {
|
|
|
- right: 0;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.vjs-slider-horizontal .vjs-volume-level:before {
|
|
|
- left: 0;
|
|
|
- right: auto;
|
|
|
-}
|
|
|
-.video-js .vjs-volume-level {
|
|
|
- /* right: 0; */
|
|
|
-}
|
|
|
-.video-js .vjs-volume-tooltip {
|
|
|
- /* float: left; */
|
|
|
-}
|
|
|
-.vPlayer .video-js .vjs-control-bar .vjs-volume-panel .vjs-volume-control {
|
|
|
- /* left: -3.5em; */
|
|
|
- /* margin-left: -1px; */
|
|
|
-}
|
|
|
-</style>
|
ali