¶Ô±ÈÐÂÎļþ |
| | |
| | | // components/idCard/index.js |
| | | Component({ |
| | | |
| | | /** |
| | | * ç»ä»¶çåå§æ°æ® |
| | | */ |
| | | data: { |
| | | videoSrc:null, |
| | | isVShow:false, |
| | | videoContext:null |
| | | }, |
| | | |
| | | /** |
| | | * ç»ä»¶çæ¹æ³å表 |
| | | */ |
| | | methods: { |
| | | startPlayVideo(videourl,obj){ |
| | | if(videourl ==null || videourl ==''){ |
| | | return |
| | | } |
| | | if(this.data.videoContext == null){ |
| | | this.data.videoContext = wx.createVideoContext('myVideo',this) |
| | | } |
| | | this.setData({isVShow:true, videoSrc:videourl}) |
| | | console.log(videourl) |
| | | this.data.videoContext.requestFullScreen({ |
| | | direction: 0 |
| | | }); |
| | | }, |
| | | onClose(){ |
| | | this.setData({isVShow:false}) |
| | | if( this.data.videoContext){ |
| | | this.data.videoContext.stop() |
| | | } |
| | | } |
| | | } |
| | | }) |
¶Ô±ÈÐÂÎļþ |
| | |
| | | { |
| | | "component": true, |
| | | "usingComponents": {} |
| | | } |
¶Ô±ÈÐÂÎļþ |
| | |
| | | .user { |
| | | width: 750rpx; |
| | | padding: 0 40rpx; |
| | | height: 148rpx; |
| | | background: #FFFFFF; |
| | | border-radius: 8rpx; |
| | | padding: 0 30rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | .content { |
| | | flex: 1; |
| | | |
| | | .name { |
| | | font-size: 30rpx; |
| | | margin-bottom: 12rpx; |
| | | } |
| | | |
| | | .desc { |
| | | font-size: 24rpx; |
| | | color: #999999; |
| | | } |
| | | } |
| | | |
| | | .avatar { |
| | | width: 80rpx; |
| | | height: 80rpx; |
| | | border-radius: 50%; |
| | | margin-right: 24rpx; |
| | | } |
| | | |
| | | .btns{ |
| | | display: flex; |
| | | .item{ |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | margin-left: 70rpx; |
| | | font-size: 20rpx; |
| | | color: #333333; |
| | | .icon{ |
| | | margin-bottom: 4rpx; |
| | | width: 44rpx; |
| | | height: 44rpx; |
| | | } |
| | | } |
| | | } |
| | | .btn { |
| | | width: 118rpx; |
| | | height: 56rpx; |
| | | line-height: 52rpx; |
| | | text-align: center; |
| | | background: var(--themeColor); |
| | | border-radius: 8rpx; |
| | | font-weight: 500; |
| | | font-size: 26rpx; |
| | | color: #fff; |
| | | } |
| | | } |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <view wx:if="{{ isVShow }}" bind:tap="onClose" class="video_content"> |
| | | <view class="video"> |
| | | <video id="myVideo" src="{{videoSrc}}" autoplay show-fullscreen-btn show-play-btn ></video> |
| | | </view> |
| | | </view > |
¶Ô±ÈÐÂÎļþ |
| | |
| | | |
| | | .video_content{ |
| | | position: fixed; |
| | | top: 10rpx; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background-color: rgba(0, 0, 0, 0.2); |
| | | z-index: 9999; |
| | | } |
| | | .video_content .video{ |
| | | position: fixed; |
| | | border-radius: 8rpx; |
| | | top: 50%; |
| | | left: 75rpx; |
| | | transform: translate(0, -50%); |
| | | width: 600rpx; |
| | | z-index: 10000; |
| | | } |
¶Ô±ÈÐÂÎļþ |
| | |
| | | // components/idCard/index.js |
| | | Component({ |
| | | |
| | | /** |
| | | * ç»ä»¶çåå§æ°æ® |
| | | */ |
| | | data: { |
| | | videoSrc:null, |
| | | isVShow:false, |
| | | videoContext:null |
| | | }, |
| | | |
| | | /** |
| | | * ç»ä»¶çæ¹æ³å表 |
| | | */ |
| | | methods: { |
| | | startPlayVideo(videourl,obj){ |
| | | if(videourl ==null || videourl ==''){ |
| | | return |
| | | } |
| | | if(this.data.videoContext == null){ |
| | | this.data.videoContext = wx.createVideoContext('myVideo',this) |
| | | } |
| | | this.setData({isVShow:true, videoSrc:videourl}) |
| | | console.log(videourl) |
| | | this.data.videoContext.requestFullScreen({ |
| | | direction: 0 |
| | | }); |
| | | }, |
| | | onClose(){ |
| | | this.setData({isVShow:false}) |
| | | if( this.data.videoContext){ |
| | | this.data.videoContext.stop() |
| | | } |
| | | } |
| | | } |
| | | }) |
¶Ô±ÈÐÂÎļþ |
| | |
| | | { |
| | | "component": true, |
| | | "usingComponents": {} |
| | | } |
¶Ô±ÈÐÂÎļþ |
| | |
| | | .user { |
| | | width: 750rpx; |
| | | padding: 0 40rpx; |
| | | height: 148rpx; |
| | | background: #FFFFFF; |
| | | border-radius: 8rpx; |
| | | padding: 0 30rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | .content { |
| | | flex: 1; |
| | | |
| | | .name { |
| | | font-size: 30rpx; |
| | | margin-bottom: 12rpx; |
| | | } |
| | | |
| | | .desc { |
| | | font-size: 24rpx; |
| | | color: #999999; |
| | | } |
| | | } |
| | | |
| | | .avatar { |
| | | width: 80rpx; |
| | | height: 80rpx; |
| | | border-radius: 50%; |
| | | margin-right: 24rpx; |
| | | } |
| | | |
| | | .btns{ |
| | | display: flex; |
| | | .item{ |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | margin-left: 70rpx; |
| | | font-size: 20rpx; |
| | | color: #333333; |
| | | .icon{ |
| | | margin-bottom: 4rpx; |
| | | width: 44rpx; |
| | | height: 44rpx; |
| | | } |
| | | } |
| | | } |
| | | .btn { |
| | | width: 118rpx; |
| | | height: 56rpx; |
| | | line-height: 52rpx; |
| | | text-align: center; |
| | | background: var(--themeColor); |
| | | border-radius: 8rpx; |
| | | font-weight: 500; |
| | | font-size: 26rpx; |
| | | color: #fff; |
| | | } |
| | | } |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <view wx:if="{{ isVShow }}" bind:tap="onClose" class="video_content"> |
| | | <view class="video"> |
| | | <video id="myVideo" src="{{videoSrc}}" autoplay show-fullscreen-btn show-play-btn ></video> |
| | | </view> |
| | | </view > |
¶Ô±ÈÐÂÎļþ |
| | |
| | | |
| | | .video_content{ |
| | | position: fixed; |
| | | top: 10rpx; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background-color: rgba(0, 0, 0, 0.2); |
| | | z-index: 9999; |
| | | } |
| | | .video_content .video{ |
| | | position: fixed; |
| | | border-radius: 8rpx; |
| | | top: 50%; |
| | | left: 75rpx; |
| | | transform: translate(0, -50%); |
| | | width: 600rpx; |
| | | z-index: 10000; |
| | | } |