问题描述
我有一个包含大约 100 个电影缩略图的主页,每个缩略图上都有一个播放图标,通过 video.js 播放器启动 YouTube 视频。 问题是 video.js 预加载了所有 youtube 资源,我有一个 50mb 的主页。 有没有办法只在用户播放视频或其他解决方案时加载资源? 该网站是在 VUE 中制作的。
这里是播放器组件的代码:
<template>
<div>
<video ref="player" class="video-js"></video>
</div>
</template>
<script>
import "video.js/dist/video-js.min.css";
import videojs from "video.js";
import "videojs-youtube";
import "@devmobiliza/videojs-vimeo";
export default {
name: "UtTrailerPlayer",props: {
src: {
type: String,default: null,},type: {
type: String,data: () => {
return {
player: null,playerOpts: {
controls: false,width: 320,height: 240,debug: true,fluid: true,liveui: false,preload: "none",techOrder: ["youtube"],languages: ["it"],};
},methods: {
init: function() {
if (this.src) {
let opts = {
controls: false,sources: [],};
if (this.type == "youtube") {
opts["sources"] = [
{
type: "video/youtube",src: this.src,];
} else if (this.type == "vimeo") {
opts["sources"] = [
{
type: "video/vimeo",vimeo: {
color: "#F2B544",];
}
const player = this.$refs.player;
this.$nextTick(() => {
if (opts.sources.length > 0 && player) {
// console.log(opts.sources[0]);
// this.player = videojs(player,opts,this.onPlayerReady());
this.player = videojs(player,opts);
} else {
// this.$emit("error");
}
});
} else {
console.log("no src");
}
},onPlayerReady: function() {
console.log("player ready");
},play: function() {
if (this.player) {
this.player.play();
}
},pause: function() {
if (this.player) {
this.player.pause();
}
},mounted: function() {
this.init();
},beforeDestroy() {
if (this.player) {
this.player.dispose();
}
},};
</script>
<style lang="scss"></style>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)