Applet swiper carousel scrolling map Pictures + Videos

Code went straight to the theme
wxml:

Click ( here) folded or unfolded

1. <view class="test_box">
3.   <swiper indicator-dots="{{indicatorDots}}"
4.   autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" >
5.   <swiper-item>
6.   <view class='ceng'>
7.       <image src="{{mdc_videofenmian}}" hidden="{{xiaoshi}}"/>
8.       <view class='btn'><image src="/img/play.png" hidden="{{xiaoshi}}" bindtap="bindPlay" /></view>
9.       <video src="{{mdc_video}}" objectFit="cover" bindtouchmove="mdc_move1" controls id="mdcVideo" style="width:100%;height:100% " hidden="{{mdc_show}}" >
10.         <cover-view class='mdc_return' bindtap='returnquanping'>退出全屏</cover-view>
11.       </video>
12.   </view>
13.     </swiper-item>
14.   <block wx:for="{{imgUrls}}">
15.     
16.     <swiper-item>
17.       <image src="{{item}}"/>
18.     </swiper-item>
19.   </block>
20. </swiper>
22. </view>

wxss：

Click ( here) folded or unfolded

1. // pages/test/test.js
2. Page({
4.   /**
5.    * Initial data page
6.    */
7.   data: {
8. // swiper pictures circulation path address
9.     imgUrls: [
10.      '/img/01.jpg',
11.       '/img/02.jpg',
12.       '/img/03.jpg'
13.    
14.     ],
15.     indicatorDots: false,
16.     autoplay: false,
17.     interval: 5000,
18.     duration: 1000,
19.     // video path
20.     mdc_video:'https://cloud.video.taobao.com/play/u/576446681/p/1/e/6/t/1/50140370746.mp4',
21.     // replace the cover art video
22.      mdc_videofenmian:'/img/f2.png',
23.     Cover art // video display parameters disappear
24.     xiaoshi: false,
25.     // video display disappears parameters
26.     mdc_show:true,
27.   },
29.   /**
30.    * Life Cycle function - listen for page loads
31.    */
32.   onLoad: function (options) {
33.   
34.   },
36.   /**
37.    * Life Cycle function - listen for the first time the page rendering is complete
38.    */
39.   onReady: function (res) {
40.     
41.   },
43.   /**
44.    * Life Cycle functions - page display monitor
45.    */
46.   onShow: function () {
47.   
48.   },
50.   /**
51.    * Life Cycle function - monitor page Hide
52.    */
53.   onHide: function () {
54.   
55.   },
57.   /**
58.    * Life Cycle function - monitor page unload
59.    */
60.   onUnload: function () {
61.   
62.   },
64.   /**
65.    * Page-related event handler - the drop-down monitor user actions
66.    */
67.   onPullDownRefresh: function () {
68.   
69.   },
71.   /**
72.    * Bottoming event handler to pull the page
73.    */
74.   onReachBottom: function () {
75.   
76.   },
78.   /**
79.    * User top right, click Share
80.    */
81.   onShareAppMessage: function () {
82.   
83.   },
84.   // When the cover clicks the appropriate action to obtain video parameters in the property in JS 
85.   // 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
86.   bindPlay:function(e){
87.     var that =this;
88.    that.videoContext = wx.createVideoContext('mdcVideo');
89.   // that.videoContext.play()
90.    that.videoContext.pause();
91.    setTimeout(function () {
93.      that.videoContext.play()
94.    }, 150);
95.     that.setData({ 
96.       xiaoshi: true,
97.       mdc_show:false
98.     })
99.      
100.   },
101. // Andrews system can detect the distance x video touchemove slides, this has as proof of handover swiper
102. // ios system to detect x is less than a video touchemove slide to switch through cover-view click event
103.   mdc_move1: function (e) {
104.     var that = this;
105.     console.log(e)
106.     console.log(e.touches[0].pageX)
107.     that.videoContext = wx.createVideoContext('mdcVideo');
108.     if (e.touches[0].clientX > 20) {
109.       console.log(5555555555555555)
110.       // that.videoContext.pause();
111.       that.setData({
112.       xiaoshi: false,
113.       mdc_show: true,
114.      })
115.     }
116.   },
117.   returnquanping:function(e){
118.     var that = this;
119.     that.setData({
120.       xiaoshi: false,
121.       mdc_show: true,
122.     })
123.   }
124. })

Reference article: http://blog.chinaunix.net/uid-30029642-id-5787093.html