App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<template> <div> <video-player src="https://vjs.zencdn.net/v/oceans.mp4" poster="1.jpeg" controls :loop="true" :volume="0.6" @mounted="onMounted" @ready="onReady" @play="onPlay" @pause="onPause" @ended="onEnded" @seeking="onSeeking" class="video-js" /> </div> </template> <script> import { defineComponent } from "vue"; import { VideoPlayer } from "@videojs-player/vue"; import "video.js/dist/video-js.css"; export default defineComponent({ name: "CustomVideoPlayer", components: { VideoPlayer, }, data() { return { currentTime: 0, // Track current playback time isPlaying: false, // Track if the video is currently playing }; }, methods: { onMounted(player) { console.log("Video player mounted:", player); }, onReady(player) { console.log("Video player is ready:", player); }, onPlay(player) { this.isPlaying = true; console.log("Video is playing:", player); }, onPause(player) { this.isPlaying = false; console.log("Video is paused:", player); }, onEnded(player) { console.log("Video has ended:", player); }, onSeeking(player) { console.log("Seeking video:", player.currentTime()); this.currentTime = player.currentTime(); }, }, }); </script> <style scoped> /* Optional custom styles */ .video-js { width: 100%; max-width: 720px; margin: 0 auto; } </style> |
