更改视频背景

Changing Video Background

本文关键字：背景 视频      更新时间：2023-09-26

我有这段代码，它带来了一个视频背景文件。我拼命尝试创建多个链接，单击这些链接时将"文件名"云更改为不同的文件， 

  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="../jquery.backgroundvideo.min.js"></script>
  <script>
    $(document).ready(function() {
      var videobackground = new $.backgroundVideo($('body'), {
        "align": "centerXY",
        "width": 1280,
        "height": 720,
        "path": "media/",
        "filename": "cloud",
        "types": ["mp4","ogg","webm"]
      });
    });
  </script>

任何帮助将不胜感激

该插件创建一个名为 #video_background 的div。只需将其删除并再次致电$.backgroundVideo即可。你可以把它放在一个函数中，文件名作为参数：

function changeVideo(filename){
    $('#video_background').remove();
    var videobackground = new $.backgroundVideo($('body'), {
        "align": "centerXY",
        "width": 1280,
        "height": 720,
        "path": "media/",
        "filename": filename,
        "types": ["mp4","ogg","webm"]
    });
}

要通过单击链接来调用它，您可以执行以下操作：

<a href="#" data-video="sun">Sun video</a>

和

$('[data-video]').click(function(e){
    e.preventDefault(); // prevent the link from reloading the page
    changeVideo( $(this).attr('data-video') );
});
相关文章：