uniapp如何是实现网页内上下多个video视频滚动到可视范围自动播放？
网友回复
uniapp新建组件lazyload.vue
<template>
<view class="lazy-content" :style="{
width,
height,
}">
<!-- 加载中 -->
<image :src="loadSrc" class="lazy-image lazy-load" @load="init" mode="aspectFill" :style="{
opacity:isShow?'0':'1',
borderRadius,
width,
height,
transition: `opacity ${duration/1000}s ${effect}`
}"></image>
<!-- 加载成功 -->
<image class="lazy-image" @load="load" @error="error" v-if="status==1" :src="src" mode="aspectFill" :style="{
opacity:isShow?'1':'0',
borderRadius,
width,
height,
transition: `opacity ${duration/1000}s ${effect}`
}">
</image>
<!-- 加载失败 -->
<image class="lazy-image" v-if="status==2" :src="errorSrc" mode="aspectFill" :style="{
opacity:isShow?'1':'0',
borderRadius,
width,
height,
transition: `opacity ${duration/1000}s ${effect}`
}">
</image>
</view>
</template>
<script>
let loadTimer = null
import loadingImage from "../static/images/avatar.png"
import loadFailImage from '../static/images/avatar.png'
/**
* 懒加载插件
* @description 懒加载插件
*
* @property {String} borderRadius 图片圆角,必须带尺寸单位
* @property {String} width 图片宽度,必须带尺寸单位(默认100%)
* @property {String} height 图片高度,必须带尺寸单位(默认100%)
* @property {String} src 图片链接,不传的话会一直是加载中状态
* @property {String|Number} minTimeOut 当图片加载过快(存在缓存)至少显示多少秒加载动画
* @property {String} effect = [linear|ease|ease-in|ease-out|ease-in-out] 过渡效果,可以用cubic-bezier
* @value linear 规定以相同速度开始至结束的过渡效果(默认)
* @value ease 规定慢速开始,然后变快,然后慢速结束的过渡效果
* @value ease-in 规定以慢速开始的过渡效果
* @value ease-out 规定以慢速结束的过渡效果
* @value ease-in-out 规定以慢速开始和结束的过渡效果
* @property {String|Number} duration 图片加载成功后的过渡时间,单位毫秒
* @property {Object} showDistance 当图片到屏幕哪个位置的时候开始加载,单位px,可以是负数 (默认{bottom:0})
* @property {String} loadSrc 加载中显示的图片，输入网络路径或绝对路径
* @property {String} errorSrc 加载失败显示的图片，输入网络路径或绝对路径
* @event {Function} show 当图片进入页面触发
* @event {Function} showSuccess 当图片完全加载完毕触发
* @example <lazy-lazyLoad :src="src" width="100rpx" height="100rpx"></lazy-lazyLoad>
*/
export default {
name: "lazyLoad",
props: {
//图片圆角 必须带尺寸单位
borderRadius: {
type: String,
default: '0'
},
//图片宽度
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
//图片链接
src: {
type: String,
default: ''
},
//当图片加载过快(存在缓存)至少显示多少秒加载动画
minTimeOut: {
type: String || Number,
default: '300'
},
//当图片到屏幕哪个位置的时候开始加载 单位px 可以是负数
showDistance: {
type: Object,
default: () => {
bottom: 20
}
},
//过渡效果 linear / ease / ease-in / ease-out / ease-in-out
effect: {
type: String,
default: 'linear'
},
//图片加载成功后的过渡时间 单位毫秒
duration: {
type: String || Number,
default: '300'
},
//加载中图片
loadSrc: {
type: String,
default: loadingImage
},
//加载失败图片
errorSrc: {
type: String,
default:loadFailImage
}
},
data() {
return {
status: 0, //0加载中 1加载成功 2加载失败
isShow: false
}
},
watch: {
//当链接变化重新加载
src() {
if (!this.isShow) return
this.status = 0
this.isShow = false
this.$nextTick(() => {
this.status = 1
})
}
},
destroyed() {
//页面销毁取消监听
this.$emit('destroyed')
},
methods: {
load() {
if (this.minTimeOut == 0) {
this.isShow = true
}else{
let newTimer = new Date().getTime() - loadTimer
if (newTimer < this.minTimeOut) {
setTimeout(() => {
this.isShow = true
}, this.minTimeOut - newTimer)
} else {
this.isShow = true
}
}
setTimeout(()=>{
this.$emit('showSuccess');
},this.duration)
},
error() {
this.status = 2
this.isShow = true
},
init(){
let intersectionObserver = uni.createIntersectionObserver(this)
let load = false
//当图片加载完的时候取消监听
this.$once('destroyed', () => {
intersectionObserver.disconnect()
})
intersectionObserver.relativeToViewport(this.showDistance).observe('.lazy-load', (res) => {
if (!load && res.intersectionRatio == 0) {
load = true
return
}
this.$emit('show');
load = true
this.status = 1
loadTimer = new Date().getTime()
intersectionObserver.disconnect()
})
}
}
}
</script>
<style lang="scss" scoped>
.lazy-content {
overflow: hidden;
position: relative;
.lazy-image {
display: block;
will-change: transform;
}
.lazy-load {
position: absolute;
left: 0;
top: 0;
}
}
</style>
1引入使用<template>
<view>
// 示例
<lazyLoad src="http://repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png" width="100rpx" height="400rpx" borderRadius="50%"></lazyLoad>
<lazyLoad src="http://repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png" width="100rpx" height="400rpx" borderRadius="50%"></lazyLoad>
<lazyLoad src="http://repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png" width="100rpx" height="400rpx" borderRadius="50%"></lazyLoad>
<lazyLoad src="http://repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png" width="100rpx" height="400rpx" borderRadius="50%"></lazyLoad>
<lazyLoad src="http://repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png" width="100rpx" height="400rpx" borderRadius="50%"></lazyLoad>
<lazyLoad src="http://repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png" width="100rpx" height="400rpx" borderRadius="50%"></lazyLoad>
<lazyLoad src="http://repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png" width="100rpx" height="100rpx" borderRadius="50%"></lazyLoad>
<lazyLoad src="http://repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png" width="100rpx" height="100rpx" borderRadius="50%"></lazyLoad>
<lazyLoad src="http://repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png" width="100rpx" height="100rpx" borderRadius="50%"></lazyLoad>
<lazyLoad src="http://repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png" width="100rpx" height="100rpx" borderRadius="50%"></lazyLoad>
<lazyLoad src="http://repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png" width="100rpx" height="100rpx" borderRadius="50%"></lazyLoad>
<lazyLoad src="http://repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png" width="100rpx" height="100rpx" borderRadius="50%"></lazyLoad>
</view>
</template>
<script>
import lazyLoad from "@/components/lazyload.vue"
export default {
components: {
lazyLoad
},
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
1视频原理跟这个一样。by thinkfuture
举个html的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Intersection Observer</title>
<style>
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<video src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" loop controls muted></video>
<video src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" loop controls muted></video>
<video src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" loop controls muted></video>
<video src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" loop controls muted></video>
<video src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" loop controls muted></video>
<video src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" loop controls muted></video>
<video src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" loop controls muted></video>
<video src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" loop controls muted></video>
<video src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" loop controls muted></video>
<video src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" loop controls muted></video>
<video src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" loop controls muted></video>
<video src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" loop controls muted></video>
<script>
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const video = entry.target;
video.play();
console.log("开始")
// observer.unobserve(video);//解除监听
} else {
const video = entry.target;
video.pause();
console.log("暂停")
// 元素未进入可视区域时执行的操作
}
});
}, {threshold: 0.1}); // 设置阈值为 0.5,表示当元素与视图框相交面积达到一半时开始观察
const videos = document.querySelectorAll('video');
videos.forEach((video) => {
observer.observe(video);
});
</script>
</body>
</html>by thinkfuture
我知道答案，我要回答
私活外包
最新提问
