Tencent cloud on-demand playback controls led to the development of the introduction of mui.js click event triggered multiple times
<video id="player-container-id" preload="auto" width="640" height="360" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="landscape" playsinline webkit-playsinline></video>
When Tencent cloud video-on-demand label written on the x5-video-player-type = "h5" property will be used X5 UI of the player, the player can solve hijacked control configuration is not displayed,
When this time introduced mui.js development, you will find controls for each click will be performed twice, leading the play button clicks can not play or pause button after clicking speed, speed will skip once.
The solution is:
Add video to a parent element (not if)
Then stop bubbling parent element touchsart
document.querySelector(".win").addEventListener('touchstart', function(event) {event.stopPropagation()})
<div class="win">
video...
</div>