我正在使用 Next.js 和 video.js 开发视频播放器，但在显示前置广告时遇到问题。我想在视频开始播放之前显示预贴片广告，但我不知道该怎么做。
我尝试在线寻找解决方案，但找不到任何适合我的设置的内容。如果有人能给我一些关于如何使用 Next.js 在 video.js 中实现预贴片广告的指导，我将非常感激。
这是我当前正在使用的代码：
import { useEffect, useRef } from "react";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-contrib-hls";
const VideoPlayerVideoJs = ({ video }) => {
const videoRef = useRef(null);
useEffect(() => {
const player = videojs(videoRef.current, {
sources: [
{
src: video?.url,
},
],
liveui: true,
preload: false,
autoplay: true,
muted: video?.categoryName === "LiveTV",
});
player.on("timeupdate", () => {
const videoDuration = player.duration();
const currentTime = player.currentTime();
const timeLeft = videoDuration - currentTime;
});
}, [videoRef, video]);
return (
<div>
<video
id="playerId"
controls
ref={videoRef}
muted={video?.categoryName === "LiveTV"}
className="video-js vjs-default-skin vjs-big-play-centered vjs-16-9 vjs-fluid vjs-user-inactive vjs-controls-enabled vjs-workinghover vjs-waiting vjs-has-started vjs-live vjs-liveui-enabled vjs-touch-enabled"
data-setup='{"fluid": true}'
/>
</div>
);
};
export default VideoPlayerVideoJs;
任何帮助将不胜感激！预先感谢您。
我尝试使用“videojs-contrib-ads”插件来显示前置广告，但是我遇到了困难，无法成功实现此功能。我还尝试使用“videojs-vast-vpaid”插件作为替代解决方案，但遇到了与该插件相关的全局 CSS 问题相关的单独错误。
我能够使用它来展示预贴片广告或大型广告。
export const VideoJS = ({ options }) => {
const videoRef = useRef(null)
const { vastURL } = options
useEffect(() => {
const videoElement = document.createElement('video-js')
videoElement.setAttribute('id', 'video-js')
videoElement.classList.add('vjs-big-play-centered')
videoRef.current?.append(videoElement)
const player = window.videojs(videoElement, options, () => {
const options = {
id: 'video-js',
adTagUrl: vastURL,
}
player.ima(options)
})
}, [options, videoRef])
return (
<>
<Head>
<link
rel='stylesheet'
href='//googleads.github.io/videojs-ima/node_modules/video.js/dist/video-js.min.css'
/>
<link
rel='stylesheet'
href='//googleads.github.io/videojs-ima/node_modules/videojs-contrib-ads/dist/videojs.ads.css'
/>
<link
rel='stylesheet'
href='//googleads.github.io/videojs-ima/dist/videojs.ima.css'
/>
</Head>
<Script
strategy='beforeInteractive'
src='//googleads.github.io/videojs-ima/node_modules/video.js/dist/video.min.js'
/>
<Script
strategy='beforeInteractive'
src='//imasdk.googleapis.com/js/sdkloader/ima3.js'
/>
<Script
strategy='beforeInteractive'
src='//googleads.github.io/videojs-ima/node_modules/videojs-contrib-ads/dist/videojs.ads.min.js'
/>
<Script
strategy='beforeInteractive'
src='//googleads.github.io/videojs-ima/dist/videojs.ima.js'
/>
<div data-vjs-player id='content_video'>
<div ref={videoRef} />
</div>
</>
)
}
这些脚本需要使用策略 beforeInteractive 加载，以便大量预卷可以工作。