vue3.0 中使用video.js 開啟立即播放 方案

排码的小拇指發表於2024-08-15

谷歌瀏覽器禁止了video、audio標籤的autoplay屬性

谷歌的初衷不是禁止影片,而是禁止音訊,但是影片中包含了音訊資訊,所以一併被禁止了

<template>
<video ref="videoPlayer" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
data-setup="{}">
<source src="https://video.titansmart.cn/live/index2/1723701061.mp4" />
<!-- <source src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" type="video/mp4" /> -->
<!-- 其他影片源 -->
</video>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

export default {
name: 'VideoPlayerComponent',
mounted() {
this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
console.log('Player is ready');
this.muted(true);

this.play()
});
},
beforeUnmount() {
if (this.player) {
this.player.dispose();
}
}
};
</script>

<style>
/* 你的樣式 */
</style>

相關文章