json 如何在Elementor上滚动时启用图片视频模式中的图片?

h7appiyu  于 5个月前  发布在  其他
关注(0)|答案(1)|浏览(47)

我做一个客户端的网站和他们的页面生成器是在Elementor.他要求一个画中画模式后滚动..
他们想要达到这样的效果;这里有一个滚动时的PiP示例:https://bitly.ws/36hIz
我需要做类似的,但与元素WordPress的
再次感谢

mbzjlibv

mbzjlibv1#

您可以通过以下步骤在使用Elementor Wordpress滚动时实现画中画模式。
第一步:(根据此链接https://bitly.ws/36hIz)复制此代码。在您的elementor页面中,取一个名为HTML的小部件并将其粘贴到该小部件中。正如您可以在image中看到的那样

<!-- Styles for the picture-in-picture plugin -->
<link href="//players.brightcove.net/videojs-pip/1/videojs-pip.css" rel="stylesheet">

<!-- Container to hold the text and video player -->
<div class="wrap">
  <h1>Picture-in-Picture Plugin</h1>
  <p>
    After starting video playback, scroll down the page to cause the player to jump out of the content, but not cause the content to re-flow. Scrolling room is available both vertically and horizontally.
  </p>
  
  <!-- The picture-in-picture container. This is required! -->
  <div class="vjs-pip-container">
    <!-- The player embed code -->
    <video-js id="myPlayerID" 
              data-account="1752604059001"
              data-player="Zbggd6KGf" 
              data-embed="default" 
              controls="" 
              
              data-playlist-id="" 
              data-application-id=""
              width="560" height="315"></video-js>
    <script src="https://players.brightcove.net/1752604059001/Zbggd6KGf_default/index.min.js"></script>
  </div>
  
  <p>
    Lorem ipsum dolor sit amet, lectus ac porttitor mauris sit nec cupidatat, lobortis tempor lacus dui id, sit amet, fringilla mi pharetra volutpat mauris. Urna in magnis neque nunc, varius suspendisse erat nullam nibh sed a, tincidunt scelerisque magnis ac tortor rutrum, eget lacus urna porta, cras vel. Enim commodo wisi bibendum ornare ullamcorper metus, mauris venenatis nulla neque suspendisse, orci odio officia, eget nunc aenean. 
  </p>
  <p>
    Posuere a pellentesque praesent wisi, pede feugiat lectus egestas eget, mattis condimentum elit, vivamus amet vestibulum egestas cras donec fusce, lectus at. Quisque torquent, nulla eros, et suscipit elit, gravida consequat diam cras turpis mauris nam. Vivamus varius amet cursus elit, possimus donec arcu luctus. Libero dapibus nunc sapien.
  </p>
</div>

<!-- Script for the picture-in-picture plugin -->
<script src="//players.brightcove.net/videojs-pip/2/videojs-pip.min.js"></script>

字符串
第2步:将此脚本添加到页脚(或函数文件,根据您的方便)。如果需要,您可以从here获取帮助。

videojs.getPlayer('myPlayerID').ready(function() {
  // When the player is ready, get a reference to it
  var myPlayer = this;
    myPlayer.poster('full/path/to/your/image.jpg');
     myPlayer.src({
        src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
        type: 'video/mp4'
      });
  // Initialize the picture-in-picture plugin
  myPlayer.pip();
});


第3步:保存两个步骤后,访问您的页面,你已经实现了画中画模式滚动。
为我工作(https://prnt.sc/cthcmcpuT7RQ
希望对你有帮助!

相关问题