Added video.js player with VR support for trailers.

assets/components/releases/banner.vue

@@ -8,29 +8,26 @@
 				v-if="release.trailer || release.teaser"
 				class="trailer-container"
 			>
-				<video
+				<Player
 					v-if="release.trailer"
-					:src="`/media/${release.trailer.path}`"
+					:video="release.trailer"
 					:poster="poster"
-					:alt="release.title"
-					:class="{ sfw: sfw && paused }"
-					class="item trailer"
-					controls
-					@playing="playing = true; paused = false;"
+					class="item"
+					@play="playing = true; paused = false;"
 					@pause="playing = false; paused = true;"
-				>Sorry, the tailer cannot be played in your browser</video>
+				/>
 
-				<video
+
+				<Player
 					v-else-if="release.teaser && /^video\//.test(release.teaser.mime)"
-					:src="`/media/${release.teaser.path}`"
+					:video="release.teaser"
 					:poster="poster"
 					:alt="release.title"
 					:class="{ sfw: sfw && paused }"
-					class="item trailer"
-					controls
-					@playing="playing = true; paused = false;"
+					class="item"
+					@play="playing = true; paused = false;"
 					@pause="playing = false; paused = true;"
-				>Sorry, the tailer cannot be played in your browser</video>
+				/>
 
 				<img
 					v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
@@ -110,6 +107,8 @@
 </template>
 
 <script>
+import Player from '../video/player.vue';
+
 function sfw() {
 	return this.$store.state.ui.sfw;
 }
@@ -151,6 +150,9 @@ function photos() {
 }
 
 export default {
+	components: {
+		Player,
+	},
 	props: {
 		release: {
 			type: Object,
@@ -167,6 +169,7 @@ export default {
 	},
 	data() {
 		return {
+			player: null,
 			playing: false,
 			paused: false,
 		};