javascript 离线视频模式

lnlaulya 于 2023-08-02 发布在 Java

关注(0)|答案(1)|浏览(90)

我需要创建一个视频模式运行在一个离线inverenment。我试着用这个问题的答案... Display video in modal

`$(function() {
  $(".video").click(function () {
    var theModal = $(this).data("target"),
        videoSRC = $(this).attr("data-video"),
        videoSRCauto = videoSRC + "";
    $(theModal + ' source').attr('src', videoSRCauto);
    $(theModal + ' video').load();
    $(theModal + ' button.close').click(function () {
      $(theModal + ' source').attr('src', videoSRC);
    });
  });
});`

`<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<button class="btn btn-lg video" data-video="https://clienti.dk/media/1140/friheden-video.mp4" data-    toggle="modal" data-target="#videoModal">Play Video</button>

  <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <video controls width="100%">
            <source src="" type="video/mp4">
          </video>
        </div>
      </div>
    </div>
  </div>`

字符串
视频（video1）、（video2）等。在本地网络上，如HTML、CSS、JS、JQUERY文件夹和文件。
这在连接到互联网时工作正常...但不能脱机工作。
我可以在css文件中找到要复制的部分。（modal，btn etc.）<head> <link rel="stylesheet" href="../../css/modal.css"> <link rel="stylesheet" href="../../css/buttons.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head>
我对JavaScript的理解是有限的。。我已经尝试下载js文件，但我找不到js文件中的部分复制，使这项工作没有链接回互联网文件。而且这些文件在与HTML或单独的JS文件夹相同的文件夹中链接到它们时似乎不起作用。（我有一个音频播放器，它链接到JS文件夹中的leftplayer.js文件，它可以工作）。
有没有一些脚本，我可以使用，使这项工作？另外，当我通过xing out关闭模态时...视频继续播放音频。

JavaScript

来源：https://stackoverflow.com/questions/76808861/offline-video-modal

1条答案

按热度按时间

mfuanj7w1#

您可以从以下位置下载bootstrap.min.css：https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css和bootstrap.min.js来自https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
像这样将它们包含在您的网页中

<head>
      <link rel="stylesheet" href="modal.css">
      <link rel="stylesheet" href="buttons.css">
      <link rel="stylesheet" href="bootstrap.min.css">
      <script src="bootstrap.min.js"></script>
    </head>

字符串
如有必要，请包括上述文件的路径。
现在您可以像这样修改js

$(function() {
    $(".video").click(function() {
      var theModal = $(this).data("target"),
        videoSRC = $(this).attr("data-video"),
        videoSRCauto = videoSRC + "";
      $(theModal + ' source').attr('src', videoSRCauto);
      $(theModal + ' video').load();
      $(theModal + ' button.close').click(function() {
        $(theModal + ' video')[0].pause(); 
        $(theModal + ' source').attr('src', '');
      });
    });
  });

型
我觉得你可以走了。

修改编码

$(function() {
  $(".video").click(function() {
    var theModal = $(this).data("target"),
      videoSRC = $(this).attr("data-video");
    $(theModal + ' source').attr('src', videoSRC);
    $(theModal + ' video').load();
    $(theModal + ' button.close').click(function() {
      $(theModal + ' video')[0].pause();
      $(theModal + ' source').attr('src', '');
    });
  });
});

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>
  <button class="btn btn-lg video" data-video="https://clienti.dk/media/1140/friheden-video.mp4"
    data-toggle="modal" data-target="#videoModal">Play Video</button>

  <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <video controls width="100%">
            <source src="" type="video/mp4">
          </video>
        </div>
      </div>
    </div>
  </div>
</body>

的字符串

赞(0）回复(0）举报 2023-08-02

我来回答

javascript 离线视频模式

1条答案

相关问题

热门标签

最新问答