Code went straight to the theme
wxml:
Click ( here) folded or unfolded
- <view class="test_box">
- <swiper indicator-dots="{{indicatorDots}}"
- autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" >
- <swiper-item>
- <view class='ceng'>
- <image src="{{mdc_videofenmian}}" hidden="{{xiaoshi}}"/>
- <view class='btn'><image src="/img/play.png" hidden="{{xiaoshi}}" bindtap="bindPlay" /></view>
- <video src="{{mdc_video}}" objectFit="cover" bindtouchmove="mdc_move1" controls id="mdcVideo" style="width:100%;height:100% " hidden="{{mdc_show}}" >
- <cover-view class='mdc_return' bindtap='returnquanping'>退出全屏</cover-view>
- </video>
- </view>
- </swiper-item>
- <block wx:for="{{imgUrls}}">
- <swiper-item>
- <image src="{{item}}"/>
- </swiper-item>
- </block>
- </swiper>
- </view>
wxss:
Click ( here) folded or unfolded
- // pages/test/test.js
- Page({
- /**
- * Initial data page
- */
- data: {
- // swiper pictures circulation path address
- imgUrls: [
- '/img/01.jpg',
- '/img/02.jpg',
- '/img/03.jpg'
- ],
- indicatorDots: false,
- autoplay: false,
- interval: 5000,
- duration: 1000,
- // video path
- mdc_video:'https://cloud.video.taobao.com/play/u/576446681/p/1/e/6/t/1/50140370746.mp4',
- // replace the cover art video
- mdc_videofenmian:'/img/f2.png',
- Cover art // video display parameters disappear
- xiaoshi: false,
- // video display disappears parameters
- mdc_show:true,
- },
- /**
- * Life Cycle function - listen for page loads
- */
- onLoad: function (options) {
- },
- /**
- * Life Cycle function - listen for the first time the page rendering is complete
- */
- onReady: function (res) {
- },
- /**
- * Life Cycle functions - page display monitor
- */
- onShow: function () {
- },
- /**
- * Life Cycle function - monitor page Hide
- */
- onHide: function () {
- },
- /**
- * Life Cycle function - monitor page unload
- */
- onUnload: function () {
- },
- /**
- * Page-related event handler - the drop-down monitor user actions
- */
- onPullDownRefresh: function () {
- },
- /**
- * Bottoming event handler to pull the page
- */
- onReachBottom: function () {
- },
- /**
- * User top right, click Share
- */
- onShareAppMessage: function () {
- },
- // When the cover clicks the appropriate action to obtain video parameters in the property in JS
- // Key: Click the picture to the next video to play, but after a pause video playback directly trigger video () the outcome of the program is 150ms delay before playback video on the perfect solution
- bindPlay:function(e){
- var that =this;
- that.videoContext = wx.createVideoContext('mdcVideo');
- // that.videoContext.play()
- that.videoContext.pause();
- setTimeout(function () {
- that.videoContext.play()
- }, 150);
- that.setData({
- xiaoshi: true,
- mdc_show:false
- })
- },
- // Andrews system can detect the distance x video touchemove slides, this has as proof of handover swiper
- // ios system to detect x is less than a video touchemove slide to switch through cover-view click event
- mdc_move1: function (e) {
- var that = this;
- console.log(e)
- console.log(e.touches[0].pageX)
- that.videoContext = wx.createVideoContext('mdcVideo');
- if (e.touches[0].clientX > 20) {
- console.log(5555555555555555)
- // that.videoContext.pause();
- that.setData({
- xiaoshi: false,
- mdc_show: true,
- })
- }
- },
- returnquanping:function(e){
- var that = this;
- that.setData({
- xiaoshi: false,
- mdc_show: true,
- })
- }
- })
Reference article:
http://blog.chinaunix.net/uid-30029642-id-5787093.html