app怎么解决video层级问题(uniapp)不使用uni-mp-video
时间: 2023-09-23 16:07:10 浏览: 167
在uniapp中,如果不想使用uni-mp-video组件,可以使用原生的video组件,通过在页面中引入原生组件,并在页面中注册组件来实现。具体步骤如下:
1. 在页面的json文件中声明使用原生组件:
```json
{
"usingComponents": {
"video": "/path/to/native/video"
}
}
```
2. 在页面中引入原生组件:
```html
<video src="{{videoSrc}}" controls></video>
```
3. 在页面中定义原生组件并注册:
```js
Component({
options: {
addGlobalClass: true,
multipleSlots: true
},
properties: {
src: {
type: String,
observer: function(newVal, oldVal, changedPath) {
if (newVal !== oldVal) {
this.setData({
videoSrc: newVal
})
}
}
}
},
data: {
videoSrc: ''
},
methods: {
onPlay: function() {
// 播放视频
},
onPause: function() {
// 暂停视频
},
onEnded: function() {
// 视频播放结束
},
onError: function() {
// 视频播放出错
}
}
})
```
在定义的原生组件中,通过properties定义了一个src属性,当这个属性发生变化时,会触发observer函数,将最新的src值保存到data中。在页面渲染完成后,通过setData将src值传递给video组件。
同时,原生组件中定义了一些事件回调函数,用于处理视频的播放、暂停、结束和出错等情况。在这些回调函数中,可以根据具体的业务逻辑进行处理。
以上就是使用原生组件实现视频播放的方法。需要注意的是,在使用原生组件时,需要根据具体的小程序平台进行兼容处理。
阅读全文