The main problem with the video component is that multiple videos on a page can be played at the same time, which is obviously unreasonable. The solution is to get the video’s context object, videoContext

Once you get the context object, you can manipulate the video

// Trailer: [{"id": "123"."src": "http://trailer1.mp4"
        }, {
          "id": "456"."src": "http://trailer2.mp4"
        }]
Copy the code

page

<view class="movies"> // The playing event is triggered when the video is playing (to get the video context object must bind id), and the current ID <video V-for = is passed through the data attribute"(item,index) in trailer" :key="index" class="Trailer" :data-id="item.id" :src="item.src" @play="playing" :id="item.id"></video>
      </view>
Copy the code
Playing (e) {// Get the current video IDletCurrentId = e.c. with our fabrication: urrentTarget. Dataset. Id / / uni createVideoContext get video context object enclosing videoContent = Uni. createVideoContext(currentId) // Get the JSON object and iterate over it to stop the non-current videolet trailer = this.trailer
        for (let i = 0; i < trailer.length; i++) {
          let temp = trailer[i].id
          if(temp ! == currentId) { uni.createVideoContext(temp).pause() } } }Copy the code