93 行
2.0 KiB
Plaintext
93 行
2.0 KiB
Plaintext
<template>
|
|
<view class="container">
|
|
<!-- 视频组件 -->
|
|
<video id="myVideo2" :src="src" :controls="true" :autoplay="false" class="video" @play="onVideoPlay">
|
|
<!-- 信息流广告 - 覆盖在视频上方 -->
|
|
<view v-if="adVisible" class="ad-container">
|
|
<ad adpid="1597617406" class="ad-class" @load="loadFun" @error="errorFun" @close="closeAd"></ad>
|
|
</view>
|
|
</video>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
const src = ref("https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4")
|
|
let showAd: boolean = false
|
|
const adVisible = ref(false)
|
|
|
|
function setfs(){
|
|
const videoContext = uni.createVideoContext('myVideo2');
|
|
const direction : RequestFullScreenOptions = {direction:-90} as RequestFullScreenOptions;
|
|
videoContext!.requestFullScreen(direction);
|
|
}
|
|
|
|
function onVideoPlay() {
|
|
if (!showAd) {
|
|
const videoContext = uni.createVideoContext('myVideo2')
|
|
videoContext!.stop();
|
|
showAd = true;
|
|
const direction : RequestFullScreenOptions = {direction:90} as RequestFullScreenOptions;
|
|
videoContext!.requestFullScreen(direction);
|
|
setTimeout(() => {
|
|
adVisible.value = true;
|
|
}, 100)
|
|
|
|
}
|
|
}
|
|
|
|
function closeAd() {
|
|
console.log("执行了关闭");
|
|
adVisible.value = false;
|
|
const videoContext = uni.createVideoContext('myVideo2')
|
|
videoContext!.play()
|
|
}
|
|
|
|
function loadFun(){
|
|
console.log("加载成功");
|
|
}
|
|
|
|
function errorFun(e : UniAdErrorEvent){
|
|
console.log(e.detail);
|
|
}
|
|
|
|
onLoad(() => {
|
|
// 页面加载逻辑
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* align-items: center; */
|
|
}
|
|
|
|
.video {
|
|
width: 100%;
|
|
height: 420rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ad-class{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ad-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|