uniapp中video播放方法
时间: 2023-07-29 12:14:50 浏览: 149
在uniapp中,可以使用 `<video>` 标签来播放视频,具体方法如下:
1. 在页面中添加 `<video>` 标签:
```html
<video src="http://example.com/path/to/video.mp4"></video>
```
2. 在 `<script>` 中监听 `<video>` 的生命周期事件,例如 `loadedmetadata`,`play`,`pause`,`ended` 等事件,以便对视频进行控制。
```html
<template>
<video src="http://example.com/path/to/video.mp4" @loadedmetadata="onLoadedMetadata" @play="onPlay" @pause="onPause" @ended="onEnded"></video>
</template>
<script>
export default {
methods: {
onLoadedMetadata() {
console.log('视频元数据已加载');
},
onPlay() {
console.log('视频开始播放');
},
onPause() {
console.log('视频暂停');
},
onEnded() {
console.log('视频播放结束');
}
}
}
</script>
```
3. 在 `<script>` 中使用 `uni.createVideoContext(id)` 方法获取 `<video>` 的上下文,以便对视频进行更精细的控制,例如播放、暂停、跳转等操作。
```html
<template>
<video id="my-video" src="http://example.com/path/to/video.mp4"></video>
<button @click="playVideo">播放</button>
<button @click="pauseVideo">暂停</button>
<button @click="seekVideo(30)">跳转到30秒</button>
</template>
<script>
export default {
methods: {
playVideo() {
uni.createVideoContext('my-video').play();
},
pauseVideo() {
uni.createVideoContext('my-video').pause();
},
seekVideo(position) {
uni.createVideoContext('my-video').seek(position);
}
}
}
</script>
```
以上就是在uniapp中播放视频的方法。
阅读全文