「小程式JAVA實戰」小程式視訊播放的時候生命週期的控制（55）

摘要： 當播放單個視訊時，點選搜尋，視訊還在後臺繼續播放，這是有問題，需要通過生命週期的方式來控制，當跳轉頁面時，視訊暫停播放，視訊返回後繼續播放。原始碼https://github.com/limingios/wxProgram.git 中No.15 官網js的方式控制視訊 Vid...

當播放單個視訊時，點選搜尋，視訊還在後臺繼續播放，這是有問題，需要通過生命週期的方式來控制，當跳轉頁面時，視訊暫停播放，視訊返回後繼續播放。原始碼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開發，瞭解生命週期，可以很方便的完成一些功能的開發。

ofollow,noindex" target="_blank" href="http://zhanzhang.baidu.com/sitesubmit/index?sitename=https://idig8.com/2018/09/23/xiaochengxujavashizhanxiaochengxushipinbofangdeshihoushengmingzhouqidekongzhi55/">百度未收錄

>>原創文章，歡迎轉載。轉載請註明：轉載自IT人故事會，謝謝！

>>原文連結地址：