<template>
<iframe class="iframe-video" :onload="onloadCode" :style="{ height: calc((100vw - ${rpxToPx(64)}px) * ${aspectRatio}),border:'none',width: calc((100vw - ${rpxToPx(64)}px))}"></iframe>
</template>
<script>
export default {
props: {
src: {
type: String,
required: true
},
aspectRatio: {
type: Number,
default: 16 / 9
}
},
data() {
return {
onloadCode: ''
}
},
created() {
let html = ` <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
video {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<video
autoplay
loop
muted
src="${this.src}">
</video>
</body>
</html>`
this.onloadCode = `
try {
const doc = this.contentWindow.document;
doc.open();
doc.write(\`${html}\`);
doc.close();
} catch(e) {
console.error('iframe content load error:', e);
}
`;
},
methods:{
rpxToPx(rpx) {
const systemInfo = uni.getSystemInfoSync();
return (rpx * systemInfo.windowWidth) / 750;
},
}
}; </script>
<style scoped lang="less">
.iframe-video{
body{
margin: 0;padding: 0;
}
}
</style>
用原生的视频播放视频会至于顶层，没办法只能用这个了，有一些动不动表情包是视频格式的，所以普通的视频方式太突兀了，求解
0 个回复