「小程序JAVA实战」小程序视频播放的时候生命周期的控制(56)
转自:https://idig8.com/2018/09/23/xiaochengxujavashizhanxiaochengxushipinbofangdeshihoushengmingzhouqidekongzhi55/
当播放单个视频时,点击搜索,视频还在后台继续播放,这是有问题,需要通过生命周期的方式来控制,当跳转页面时,视频暂停播放,视频返回后继续播放。源码https://github.com/limingios/wxProgram.git 中No.15
官网js的方式控制视频
- VideoContext
>https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.html
- 代码实现
>给video增加id,然后onload获取VideoContext,onshow进行play,onHide进行pause。
videoInfo.wxml
<view style='width:100%;height:100%'>
<video id="myVideo" src="https://127.0.0.1:8081/180831CF2TS25MNC/4e0ca373-6520-45b9-a1a6-7ee8429dc5d8.mp4" muted='{{false}}' controls='{{false}}' autoplay='{{true}}' loop='{{true}}' enable-progress-gesture='{{false}}'
style='width:100%;height:100%;'
objectFit='{{cover}}'
>
<cover-view class='container'>
<!-- 上传视频 -->
<cover-image src='../../resource/images/camera.png' style='width:50rpx;height:50rpx;' bindtap='upload'></cover-image>
<!-- 搜索按钮 -->
<cover-image src='../../resource/images/search.png' style='width:45rpx;height:45rpx;' bindtap='showSearch'></cover-image>
</cover-view>
<cover-view class='container-me'>
<!-- 头像 -->
<cover-image class="face" src='{{serverUrl}}{{publisher.faceImage}}' bindtap='showPublisher'></cover-image>
<!-- 喜欢收藏按钮 -->
<block wx:if="{{userLikeVideo}}">
<cover-image class="size-me" src='../../resource/images/like.png' style='margin-top:30rpx;' bindtap='likeVideoOrNot'></cover-image>
</block>
<block wx:else>
<cover-image class="size-me" src=' ../../resource/images/unlike.png' style='margin-top:30rpx;' bindtap='likeVideoOrNot'></cover-image>
</block>
<!-- 评论按钮 -->
<cover-image class="size-me" src='../../resource/images/comments.png' style='margin-top:30rpx;' bindtap='leaveComment'></cover-image>
<!-- 分享按钮 -->
<cover-image class="size-me" src='../../resource/images/share.png' style='margin-top:30rpx;' bindtap='shareMe'></cover-image>
</cover-view>
<cover-view class='container-words'>
<cover-view>@{{publisher.nickname}}</cover-view>
<cover-view class='video-desc'>{{videoInfo.videoDesc}}</cover-view>
</cover-view>
<cover-view class='container-bottom'>
<!-- 首页按钮 -->
<cover-image class='' src='../../resource/images/index.png' class="size-bottom" bindtap='showIndex'></cover-image>
<!-- 我的按钮 -->
<cover-image class='' src='../../resource/images/mine.png' class="size-bottom" bindtap='showMine'></cover-image>
</cover-view>
</video>
</view>
videoInfo.js
Page({
data: {
cover:'cover',
videoContext:""
},
showSearch:function(){
wx.navigateTo({
url: '../videoSearch/videoSearch',
})
},
onLoad:function(){
var me = this;
me.videoContext = wx.createVideoContext('myVideo', me);
},
onShow:function(){
var me = this;
me.videoContext.play();
},
onHide:function(){
var me = this;
me.videoContext.pause();
}
})
PS:小程序开发很类似app开发,了解生命周期,可以很方便的完成一些功能的开发。
「小程序JAVA实战」小程序视频播放的时候生命周期的控制(56)的更多相关文章
- 「小程序JAVA实战」 小程序默认加载的页面和生命周期(八)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-08/ 小程序如何加载的呢?生命周期!源码:https://github.com/limingios ...
- 「小程序JAVA实战」小程序页面的上拉下拉刷新(50)
转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxuyemiandeshanglaxialashuaxin49/ 之前已经 ...
- 「小程序JAVA实战」小程序的flex布局(22)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...
- 「小程序JAVA实战」 小程序私有页面的生命周期以及导航(10)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-10/ 之前讲了小程序全局的生命周期,今天咱们说说单个页面的生命周期!源码:https://gith ...
- 「小程序JAVA实战」小程序的留言和评价功能(70)
转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...
- 「小程序JAVA实战」小程序的举报功能开发(68)
转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66-2/ 通过点击举报 ...
- 「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65 ...
- 「小程序JAVA实战」小程序的关注功能(65)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和 ...
- 「小程序JAVA实战」小程序的视频点赞功能开发(62)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeshipindianzangongnengkaifa61/ 视频点 ...
随机推荐
- 趣谈StateServer在Web Garden,Web Farm下的使用
上一篇翻译的博客[译文]漫谈ASP.NET中的Session已经介绍了Session的基础知识,如果看过了的话对Session应该有了一个比较清晰的认识了,现在我来谈谈我所遇到的困境以及对Sessio ...
- Beta阶段贡献分配规则
作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2382] 在新成员加入后,我们经过讨论,决定沿用alpha阶段贡献分分配规则. ...
- .net 应用程序 发布上线注意事项
生产环境发布时,对应的程序目录必须新建当日rar压缩包进行备份生产环境数据库发布时,必须创建存储过程的副本sql用于回滚,操作方式:F7调出对象资源管理器详细信息->选中所有存储过程->编 ...
- erhai系统使用_web
使用前说明1.安装mysql数据库,安装数据库管理器EMS(SQL Manager Lite for MySQL),将数据库导入数据库管理器: 注意对配置文件my.ini的修改.2.启动resin W ...
- win32程序显示网页
说是win32,实际程序中使用了atl的东西.所以新建win32程序时,记得勾选使用atl: 代码如下: #include "stdafx.h" #include "Wi ...
- Qt flash_eraseall nandwrite 进度条显示擦除、烧录
/***************************************************************************** * Qt flash_eraseall n ...
- [QT][DEMO] QTableWidget 设置某一列禁止编辑
例程 : 又是好风景 : http://blog.csdn.net/qiao_yihan/article/details/46413345 关键点: 1.QTableWidgetItem 的 setF ...
- springboot项目配置拦截器,进行登陆等拦截
新建拦截类: public class LoginInterceptor implements HandlerInterceptor{ private static Log logger = LogF ...
- 【idea】如何彻底卸载idea
卸载MAC中的IDEA Intellij 14 使用命令行: 1 2 3 4 5 6 cd /Applications/ rm -r IntelliJ\ IDEA\ 14.app/ rm -r /Us ...
- laravel 整合 swoole ,并简单 ab 测试对比性能以及在 PHPstorm 中利用debug调试配置swoole服务中的PHP代码
安装PHP 的 swoole 扩展 及 安装 laravel,就不描述了 整合 laravel 和 swoole 用了这个轮子,侵入性很小,一行代码搞定,推荐一下,今天刚用,不能预测未来是否会遇见坑 ...