Updating video player when switching scene page.

assets/components/video/player.vue

@@ -6,19 +6,19 @@
 		class="player video-js vjs-big-play-centered"
 		@playing="$emit('play')"
 		@pause="$emit('pause')"
-	>
-		<source
-			:src="getPath(video)"
-			type="video/mp4"
-		>
-	</video>
+	/>
 </template>
 
 <script>
 import videoJs from 'video.js';
 import 'videojs-vr/dist/videojs-vr.min';
 
-function mounted() {
+function updatePlayer() {
+	this.player.src(this.getPath(this.video));
+	this.player.poster(this.poster);
+}
+
+function initPlayer() {
 	this.player = videoJs(this.$refs.player, {
 		controls: true,
 		inactivityTimeout: 1000,
@@ -29,6 +29,8 @@ function mounted() {
 			},
 		},
 	}, () => {
+		this.player.src(this.getPath(this.video));
+
 		if (this.video.isVr) {
 			this.player.vr({ projection: '180' });
 		}
@@ -46,7 +48,17 @@ export default {
 			default: null,
 		},
 	},
-	mounted,
+	data() {
+		return {
+			player: null,
+		};
+	},
+	emits: ['play', 'pause'],
+	watch: {
+		video: updatePlayer,
+		poster: updatePlayer,
+	},
+	mounted: initPlayer,
 };
 </script>