search

blueimp / Gallery

blueimp Gallery is a touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading.
https://blueimp.github.io/Gallery/
Other
3.75k stars 984 forks source link

Allow videos to autoplay, looped, muted without controls #256

Open ZaDarkSide opened 3 years ago

ZaDarkSide commented 3 years ago

Is there any options to start videos by default muted, looped without controls?

Basically I have a gallery with images and videos intermingled, for a better user experience I would want to auto play looped and muted the videos and spare the user from a extra click, also there should be no pause/stop button for the video so you can only show the usual prev, next buttons only and no ui for the video player itself.

Is there any way I can accomplish this with this library?

blueimp commented 3 years ago

Hi @ZaDarkSide,

you can make use of the onslideend callback to automatically start playing muted videos:

blueimp.Gallery(
  [
    // ...
  ],
  {
    // ...
    onslideend: function (index, slide) {
      var video = slide.querySelector('video')
      if (video) {
        video.muted = true
        video.autoplay = true
      }
      slide.querySelector('.video-play').click()
    }
  }
)

This works for both HTML5 and YouTube/Vimeo videos, but the latter cannot be the first one in the list.

It still requires pausing videos to go to the next/previous slide and it also does not loop them automatically.

If you wanna implement this on top of this library, maybe your best bet is to implement a separate factory for it: https://github.com/blueimp/Gallery#additional-content-types

ZaDarkSide commented 3 years ago

Yeah it's best to be implemented this inside the library, i will take a shot on it with a pull request.