There is a video screen in swiper. When my video screen starts to play, swiper stops broadcasting. How can it be realized?

clipboard.png

there are pictures and videos 

      var videoBor = $(".swiper-slide");//videoswiper
var videolist = videoBor.find("video");//video
    videolist.on("play",function(){
//    mySwipertwo.autoplay.stop();
      if($(this)[0].play){
       console.log("");
       mySwipertwo.autoplay.stop();
  }
});

this code is not ineffective, but I can write a single button click. Why? 

$("-sharpbtn1").click(function(){
  mySwipertwo.autoplay.stop();
})
    <div class="swiper-container Intelligent_work">
                              <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="Animages/zuoye_one.jpg"/></div>
                                <div class="swiper-slide"><img src="Animages/zuoye_twoi.jpg"/></div>
                                <!--<div class="swiper-slide"><img src="Animages/image2.jpg"/></div>-->
                                <div class="swiper-slide">
                                    <video controls>
                                        <source src="video/zuoye_video.mp4" type="video/mp4"></source>
                                         video: <a href="myvideo.webm"></a>
                                    </video>
                                </div>
                              </div>
                             <div class="swiper-pagination"></div>
                            </div>

Why is this? I hope the above code can run, how to achieve it?

Javascript html5
Apr.05,2021

because I made a mistake, there are probably the following points: 

var videolist = videoBor.find("video");//video

as you said, this is an array, but here you bind the play event directly with on, and an exception occurs. Your binding is invalid. I don't know if it is because of jQuery (I haven't used it for several years, and I don't know the support for video). Multi-element binding is not supported for video elements, and the on method of the second jquery will not take effect. It is recommended to use the native method for video,:

. 
// videojQuery
var v = document.getElementsByTagName("video")[0];
// ,play | playing | timeupdate
 v.addEventListener("play", function () {
    mySwipertwo.autoplay.stop();
 })

if you prevent swiper from scrolling, add a mask layer. The video component layer is the highest. Show the mask when you click to play, pause or other operations to hide the mask. If not, nest it with cover-view

.

Previous: Flask logging does not write to the log file in time

Next: Create a nginx docker container, how to edit the nginx.conf file and update it after mounting the container directory to the system directory

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu