uniapp创建全屏视频广告
时间: 2025-07-21 19:34:06 浏览: 2
在 UniApp 中实现全屏视频广告,需要考虑多个方面,包括视频组件的使用、全屏模式的控制、自定义 UI 的布局以及跨平台兼容性(尤其是 iOS 和 Android 的差异)。以下是实现全屏视频广告的详细步骤和代码示例。
### ### 步骤一:使用 `<video>` 组件播放视频
UniApp 提供了内置的 `<video>` 组件用于播放视频资源。需要确保视频源地址有效,并设置 `:src` 绑定视频链接。
```html
<template>
<view class="container">
<video
:src="videoUrl"
:show-fullscreen-btn="true"
@fullscreenchange="onFullscreenChange"
class="ad-video"
></video>
</view>
</template>
```
```javascript
<script>
export default {
data() {
return {
videoUrl: 'https://example.com/ad.mp4'
};
},
methods: {
onFullscreenChange(e) {
console.log('全屏状态变化:', e.detail.fullScreen);
if (e.detail.fullScreen) {
// 进入全屏时执行的操作
} else {
// 退出全屏时执行的操作
}
}
}
};
</script>
```
### ### 步骤二:实现全屏功能并添加自定义 UI
在全屏模式下,通常需要添加自定义控件,例如跳过按钮、播放/暂停按钮、进度条等。可以通过监听 `fullscreenchange` 事件来判断是否进入全屏,并动态渲染自定义 UI。
```html
<template>
<view class="container">
<video
:src="videoUrl"
:show-fullscreen-btn="false"
@fullscreenchange="onFullscreenChange"
class="ad-video"
></video>
<view v-if="isFullscreen" class="custom-controls">
<button @click="skipAd">跳过广告</button>
</view>
</view>
</template>
```
```javascript
<script>
export default {
data() {
return {
videoUrl: 'https://example.com/ad.mp4',
isFullscreen: false
};
},
methods: {
onFullscreenChange(e) {
this.isFullscreen = e.detail.fullScreen;
},
skipAd() {
// 跳过广告逻辑,例如跳转页面或停止播放
this.isFullscreen = false;
}
}
};
</script>
```
### ### 步骤三:优化全屏样式与兼容性
不同平台对全屏的支持存在差异,特别是 iOS 和 Android。在 iOS 上,原生全屏控件的样式较为固定,可能需要通过隐藏默认控件并在全屏时覆盖自定义 UI 来实现一致性体验。
```css
<style>
.ad-video {
width: 100%;
height: 300px;
}
.custom-controls {
position: absolute;
bottom: 20px;
right: 20px;
z-index: 999;
}
</style>
```
### ### 步骤四:处理视频播放完成后的逻辑
广告播放结束后,通常需要跳转到目标页面或恢复应用界面。可以通过监听 `ended` 事件来实现。
```html
<template>
<view class="container">
<video
:src="videoUrl"
@ended="onVideoEnded"
class="ad-video"
></video>
</view>
</template>
```
```javascript
<script>
export default {
data() {
return {
videoUrl: 'https://example.com/ad.mp4'
};
},
methods: {
onVideoEnded() {
uni.redirectTo({
url: '/pages/home/home'
});
}
}
};
</script>
```
###
阅读全文
相关推荐


















