详解vue3中如何使用shaka-player

Manda ·
更新时间:2024-11-01
· 435 次阅读

目录

正文

开始使用

做成组件shakaPlayer

使用方式

注意事项

正文

Shaka Player 是谷歌公司对外开源的一款 JavaScript 类库,详细请看谷歌官方API文档。

开始使用

我们可以使用 npm 下载

npm i shaka-player 做成组件shakaPlayer <script setup> import { ref, watch, onMounted, onBeforeUnmount } from "vue"; import shaka from "shaka-player/dist/shaka-player.ui.js"; import "../../node_modules/shaka-player/dist/controls.css"; // 注意路径 const props = defineProps({ src: { type: String, required: true }, poster: { type: String, default: "" }, autoplay: { type: Boolean, default: false } }); onMounted(() => { initApp(); }); onBeforeUnmount(() => { player && player.destroy(); }); const initApp = () => { if (shaka.Player.isBrowserSupported()) { initPlayer(); } else { console.error("Browser not supported!"); } }; const videoPlayer = ref(); const videoContainer = ref(); let player = null; const initPlayer = () => { player = new shaka.Player(videoPlayer.value); const ui = new shaka.ui.Overlay( player, videoContainer.value, videoPlayer.value ); ui.configure({ // 自定义控件 controlPanelElements: [ "time_and_duration", // 进度 "spacer", "mute", // 静音 "volume", // 音量 "fullscreen", // 全屏 "overflow_menu" ], overflowMenuButtons: [ "picture_in_picture", // 画中画 "playback_rate" // 倍速 ], playbackRates: [0.5, 1, 1.5, 2], // 倍速选项 // 视频进入全屏时设备是否应旋转到横向模式 forceLandscapeOnFullscreen: false }); loadPlayer(); }; const loadPlayer = async () => { try { await player.load(props.src); } catch (e) { onError(e); } }; const onError = (error) => { console.error("Error code", error.code, "object", error); }; const play = () => videoPlayer.value && videoPlayer.value.play(); const pause = () => videoPlayer.value && videoPlayer.value.pause(); watch( () => props.src, () => initPlayer() ); defineExpose({ play, pause }); </script> <template> <div ref="videoContainer" class="max-w-full"> <video ref="videoPlayer" class="full" :poster="poster" :autoplay="autoplay" muted ></video> </div> </template> <style scoped> .max-w-full { max-width: 100%; } .full { width: 100%; height: 100%; } </style> 使用方式 <shaka-player class="video" :src="src" :poster="poster" autoplay ></shaka-player> .video { width: 100%; height: 200px; }

注意事项

默认视频控件是显示所有的,允许我们自定义。

我们可以直接使用 video 原生方法、事件和属性。

宽高可以用class样式设置。

Shaka Player不支持Vue响应对象,player 不能用 ref 来声明。

移动端视频默认静音时,autoplay 才会生效。

以上就是详解vue3中如何使用shaka-player的详细内容,更多关于vue3使用shaka-player的资料请关注软件开发网其它相关文章!



VUE player

需要 登录 后方可回复, 如果你还没有账号请 注册新账号