uniapp中video视频手动控制播放和暂停

寒墨茗殇

已于 2023-04-07 11:42:27 修改

阅读量1.2w

点赞数 4

分类专栏： uniapp 文章标签： vue.js

于 2022-03-16 13:09:55 首次发布

本文链接：https://blog.csdn.net/qq_40591925/article/details/123523863

版权

uniapp 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

上代码：

html:

<video  id="myVideo" :src="url"></video>

js:
this.videoContext = uni.createVideoContext('myVideo');//创建视频实例指向video

使用：

this.videoContext.play();  播放
this.videoContext.pause(); 暂停

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

寒墨茗殇

关注关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

uniapp 多个视频时播放当前视频暂停其他视频解决方案

qq_45768871的博客

12-26

4328

<template> <view class="video-content">  <view class="main" v-for="item in videoList" :key="item.id"> <vie.

uniapp鼠标滑动和video暂停

qq_51909288的博客

04-11

1093

小编在使用swiper进行页面滑块布局时，主页移动到其他页面后，主页面的视频仍旧继续播放（虽然看不见但是有声音），于是想通过判断屏幕是否下滑（因为视频是在首页）来暂停视频。

3 条评论您还未登录，请先登录后发表或查看评论

uniapp中实现每隔5分钟自动暂停视频播放

Jiaberrr的博客

09-08

229

最近遇到一个需求，为防止用户观看课程时刷机，需要每5分钟自动暂停视频，强迫用户手动继续。首先在template中放入video标签。里面有个@timeupdate方法很重要，每秒返回视频播放的时间，我们在这个方法里设个判断的定时器就可以了。

uniapp video视频组件在同一个页面点击一个视频播放，让另一个正在播放的视频暂停

The的博客

08-09

930

循环的是 video组件上一级的列表所以 video没有加循环。在methods里面加。

uniapp video 标签，点击进入全屏播放，退出全屏，停止播放，暂停播放

qq_24518001的博客

04-08

2772

【代码】uniapp video 标签，点击进入全屏播放，退出全屏，停止播放，暂停播放。

uniapp中封装自定义video播放器（控制器）

weixin_65116989的博客

08-14

903

实现video播放器修改默认播放暂停按钮图片，进度条，全屏播放图标，并且保留原有功能

uni-app-video(支持后台播放音频的视频播放器).zip

10-16

【uni-app-video】是一款专为uni-app框架设计的视频播放组件，它支持在后台持续播放音频，这在开发音乐播放应用或有音频背景需求的项目中尤其重要。uni-app作为一个多端开发框架，允许开发者使用一套代码实现跨平台...

HTML5页面音视频在微信和app下自动播放的实现方法

09-28

4.musicPlay函数接收一个参数isPlay，用于控制播放或暂停音乐。它首先会通过getElementById获取到对应的音乐元素（myMusic），然后根据isPlay的值决定是播放还是暂停。此外，文章也提到了在某些情况下，如果用户...

uniapp_视频+图片轮播.7z

10-22

在本文中，我们将深入探讨如何使用uniapp框架来创建一个具备视频和图片轮播功能的电商类应用程序。uniapp是一个跨平台的开发框架，它允许开发者使用一套代码库构建iOS、Android、H5以及小程序等多个平台的应用。在这...

uniapp - 完美解决＜swiper＞嵌套 video 视频时卡顿不流畅问题，swiper滑块视图容器里面包含视频播放器和图片共存时滑动切换特别卡，滑动不流畅问题的解决方案（保证解决此问题）

高级前端工程师

10-14

5631

uniapp，uview，swiper滑块视图容器组件，swiper组件卡顿，swiper内嵌套包含视频video组件太卡不流畅，uniapp swiper里面有视频播放太卡怎么办，uniapp swiper里面包含视频没播放完就自动划走了，swiper里面的视频如何播放时禁止自动轮播滑动，在uniapp中使用swiper不流畅卡怎么办，uni-app swiper轮播图片加视频卡顿问题如何解决，uni-app nvue 小程序 H5 APP swiper做轮播图同时内嵌视频与图片卡顿，uniapp的swi

【uniapp的swiper里包含video】uniapp的swiper里包含video，解决滑动不流畅问题

weixin_48596030的博客

10-24

4305

【uniapp的swiper里包含video】uniapp的swiper里包含video，解决滑动不流畅问题

uni-app video标签希望每次播放从头开始/控制视频重新从头开始播放

tutututuuu的博客

05-14

583

onShow （）{

uni-app video 多个视频循环播放全屏自动播放退出自动暂停功能

a13145211的博客

05-09

4708

<view class="video_item"> <video v-for="(item,index) in video_url" :key="index" :id="'myVideo'+index" :src="item.name" @fullscreenchange="fullscreenchange" @play="saveplay(index)" class="classvideo" @click="videoPlay(index)"

uniapp开发-video自定义播放控件

热门推荐

摸鱼小队

11-25

1万+

uniapp video判断播放状态

04-25

您好，如何判断uniapp中的video视频播放状态，您可以使用uniapp提供的API来实现。可以通过监听video的事件来获取其播放状态。比如： 1. 通过uniapp提供的onPlay事件来监听视频播放事件。 ``` <video src="your_video_url" @play="play"></video> ``` 2. 通过uniapp提供的onPause事件来监听视频暂停事件。 ``` <video src="your_video_url" @pause="pause"></video> ``` 3. 通过uniapp提供的onEnded事件来监听视频播放结束事件。 ``` <video src="your_video_url" @ended="ended"></video> ``` 在事件触发时，您就可以获取其播放状态。比如在play事件中设置一个状态变量来表示视频播放状态： ``` data() { return { videoPlaying: false } }, methods: { play() { this.videoPlaying = true; } } ``` 在pause和ended事件中改变该状态变量的值即可。 ``` methods: { pause() { this.videoPlaying = false; }, ended() { this.videoPlaying = false; } } ``` 通过这种方法，您就可以很方便地获取uniapp中video视频的播放状态了。如果您有更多的问题或者疑问，请随时问我哦。