Video Player - Documentation | Front - 基于Boostrap5的多用途响应式模板库

How to use

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

        
          <script src="./assets/vendor/hs-video-player/dist/hs-video-player.min.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

        
          <script>
            (function() {
              // INITIALIZATION OF VIDEO PLAYER
              // =======================================================
              new HSVideoPlayer('.js-inline-video-player')
            });
          </script>

YouTube

预览
HTML

              
                <!-- Video Block -->
                <div id="youTubeVideoPlayer" class="video-player video-player-inline-btn">
                  <img class="img-fluid video-player-preview" src="../assets/img/1920x800/img6.jpg" alt="Image">

                  <!-- Play Button -->
                  <a class="js-inline-video-player video-player-btn video-player-centered" href="javascript:;"
                     data-hs-video-player-options='{
                       "videoId": "d4eDWc8g0e0",
                       "parentSelector": "#youTubeVideoPlayer",
                       "targetSelector": "#youTubeVideoIframe",
                       "isAutoplay": true
                     }'>
                    <span class="video-player-icon shadow-sm">
                      <i class="bi-play-fill"></i>
                    </span>
                  </a>
                  <!-- End Play Button -->

                  <!-- Video Iframe -->
                  <div class="ratio ratio-16x9">
                    <div id="youTubeVideoIframe"></div>
                  </div>
                  <!-- End Video Iframe -->
                </div>
                <!-- End Video Block -->

Vimeo

预览
HTML

              
                <!-- Video Block -->
                <div id="vimeoVideoPlayer" class="video-player video-player-inline-btn">
                  <img class="img-fluid video-player-preview" src="../assets/img/1920x800/img6.jpg" alt="Image">

                  <!-- Play Button -->
                  <a class="js-inline-video-player video-player-btn video-player-centered" href="javascript:;"
                     data-hs-video-player-options='{
                       "videoType": "vimeo",
                       "videoId": "412471131",
                       "parentSelector": "#vimeoVideoPlayer",
                       "targetSelector": "#vimeoVideoIframe",
                       "isAutoplay": true
                     }'>
                    <span class="video-player-icon shadow-sm">
                      <i class="bi-play-fill"></i>
                    </span>
                  </a>
                  <!-- End Play Button -->

                  <!-- Video Iframe -->
                  <div class="ratio ratio-16x9">
                    <div id="vimeoVideoIframe"></div>
                  </div>
                  <!-- End Video Iframe -->
                </div>
                <!-- End Video Block -->

              
                <!-- Video Block -->
                <div id="html5VideoPlayer" class="video-player video-player-inline-btn">
                  <img class="img-fluid video-player-preview" src="../assets/video/working-in-office.jpg" alt="Image">

                  <!-- Play Button -->
                  <a class="js-inline-video-player video-player-btn video-player-centered" href="javascript:;"
                     data-hs-video-player-options='{
                       "videoType": "html5",
                       "videoId": "../assets/video/working-in-office",
                       "videoId": "412471131",
                       "parentSelector": "#html5VideoPlayer",
                       "targetSelector": "#html5VideoIframe",
                       "isAutoplay": true
                     }'>
                    <span class="video-player-icon shadow-sm">
                      <i class="bi-play-fill"></i>
                    </span>
                  </a>
                  <!-- End Play Button -->

                  <!-- Video Iframe -->
                  <div class="ratio ratio-16x9">
                    <div id="html5VideoIframe"></div>
                  </div>
                  <!-- End Video Iframe -->
                </div>
                <!-- End Video Block -->

Methods

Parameters	Description	Default value
`parentSelector`	Parent element containing the invoker initializing the plugin	`null`
`targetSelector`	Selector into which markup will be generated for the corresponding video type	`null`
`classMap.toggle`	Toggle class for element to be initialized	`classMap: { toggle: 'video-player__played' }`
`videoType`	Video type `you-tube`, `vimeo` and `html5`	`'you-tube'`
`videoId`	Video ID. For example, for YouTube `https://www.youtube.com/watch?v=def123` - `def123` is the value for this parameter. For Vimeo `https://vimeo.com/56282283` - `56282283` is the value for this parameter.	`null`
`isAutoplay`	Determines whether the video will play automatically	`false`
`isMuted`	Determines whether the video will play muted or not	`false`