Skip to content

T
tea-resources-web
Commit a336049f authored by liwei's avatar liwei
Browse files
Options

修改了视频右键bug

parent 6ee2640e
Hide whitespace changes
Inline Side-by-side
Showing with 87 additions and 82 deletions
src/components/Tools/EduVideo.vue
View file @ a336049f
<template> <template>
<div class="item"> <div class="item">
<div class="player"> <div class="player" @contextmenu.prevent="menuPlayer()">
<video-player class="vjs-custom-skin" <video-player
ref="videoPlayer" ref="videoPlayer"
:options="playerOptions" class="vjs-custom-skin"
:playsinline="true" :options="playerOptions"
@play="onPlayerPlay($event)" :playsinline="true"
@pause="onPlayerPause($event)" @play="onPlayerPlay($event)"
@ended="onPlayerEnded($event)" @pause="onPlayerPause($event)"
@loadeddata="onPlayerLoadeddata($event)" @ended="onPlayerEnded($event)"
@waiting="onPlayerWaiting($event)" @loadeddata="onPlayerLoadeddata($event)"
@playing="onPlayerPlaying($event)" @waiting="onPlayerWaiting($event)"
@timeupdate="onPlayerTimeupdate($event)" @playing="onPlayerPlaying($event)"
@canplay="onPlayerCanplay($event)" @timeupdate="onPlayerTimeupdate($event)"
@canplaythrough="onPlayerCanplaythrough($event)" @canplay="onPlayerCanplay($event)"
@ready="playerReadied" @canplaythrough="onPlayerCanplaythrough($event)"
@statechanged="playerStateChanged($event)"> @ready="playerReadied"
</video-player> @statechanged="playerStateChanged($event)"
</div> />
</div> </div>
</div>
</template> </template>
<script> <script>
import 'video.js/dist/video-js.css' import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player' import { videoPlayer } from 'vue-video-player'
export default { export default {
data() { components: {
return { videoPlayer
// videojs options },
props: ['playerOptions'],
} data() {
return {
// videojs options
}
},
computed: {
player() {
return this.$refs.videoPlayer.player
}
},
mounted() {
// console.log('this is current player instance object', this.player)
setTimeout(() => {
// console.log('dynamic change options', this.player)
this.player.muted(false)
}, 2000)
},
methods: {
menuPlayer(event) {
// 阻止默认的右键菜单显示
event.preventDefault()
},
// listen event
onPlayerPlay(player) {
// console.log('player play!', player)
},
onPlayerPause(player) {
// console.log('player pause!', player)
},
onPlayerEnded(player) {
this.$emit('seeComplete')
// console.log('player ended!', player)
},
onPlayerLoadeddata(player) {
// console.log('player Loadeddata!', player)
},
onPlayerWaiting(player) {
// console.log('player Waiting!', player)
},
onPlayerPlaying(player) {
// console.log('player Playing!', player)
},
onPlayerTimeupdate(player) {
// console.log('player Timeupdate!', player.currentTime())
}, },
components:{ onPlayerCanplay(player) {
videoPlayer // console.log('player Canplay!', player)
}, },
props:['playerOptions'], onPlayerCanplaythrough(player) {
mounted() { // console.log('player Canplaythrough!', player)
// console.log('this is current player instance object', this.player)
setTimeout(() => {
//console.log('dynamic change options', this.player)
this.player.muted(false)
}, 2000)
}, },
computed: { // or listen state event
player() { playerStateChanged(playerCurrentState) {
return this.$refs.videoPlayer.player // console.log('player current update state', playerCurrentState)
}
}, },
methods: { // player is ready
// listen event playerReadied(player) {
onPlayerPlay(player) { // seek to 10s
// console.log('player play!', player) // console.log('example player 1 readied', player)
}, player.currentTime(0)
onPlayerPause(player) { // console.log('example 01: the player is readied', player)
// console.log('player pause!', player)
},
onPlayerEnded(player) {
this.$emit('seeComplete');
// console.log('player ended!', player)
},
onPlayerLoadeddata(player) {
// console.log('player Loadeddata!', player)
},
onPlayerWaiting(player) {
// console.log('player Waiting!', player)
},
onPlayerPlaying(player) {
// console.log('player Playing!', player)
},
onPlayerTimeupdate(player) {
// console.log('player Timeupdate!', player.currentTime())
},
onPlayerCanplay(player) {
// console.log('player Canplay!', player)
},
onPlayerCanplaythrough(player) {
// console.log('player Canplaythrough!', player)
},
// or listen state event
playerStateChanged(playerCurrentState) {
// console.log('player current update state', playerCurrentState)
},
// player is ready
playerReadied(player) {
// seek to 10s
// console.log('example player 1 readied', player)
player.currentTime(0)
// console.log('example 01: the player is readied', player)
}
} }
} }
}
</script> </script>
<style > <style >
.vjs-custom-skin > .video-js { .vjs-custom-skin > .video-js {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment