html中怎么点击图片弹出视频？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html中怎么点击图片弹出视频？相关的知识，希望对你有一定的参考价值。

头标签代码如下：

<link href="css/layerModel.css" type="text/css" rel="stylesheet">
 <script type="text/javascript" src="js/jquery.layerModel.js"></script><script type="text/javascript">$(function() $("#demoBtn1").click(function()      $('#demo1').layerModel( blurClose : true );    );
）;

body代码如下：

<a href="#" id="demoBtn1"  class="run">          <img    src="img/three-video2.png">              <span class="over-text"  style="float:left;width:90%;">案例视频影视官网2.0</span>     </a>
<!--弹出视频的代码-->            <div id="demo1" class="gpc-t-box">              <div class="gpc-video-t">                <embed allowscriptaccess="always" allownetworking="all" allowfullscreen="true" width="670" height="377" type="application/x-shockwave-flash" src="http://cloud.video.taobao.com/play/u/2182797685/p/1/e/1/t/7/38483233.swf">                </embed>              </div>              <div class="gpc-video-t1">                 <div class="gpc-video-t1-lf">                   <h2 class="gpc-video-t1-lf-1">案例视频影视官网</h2><span class="gpc-video-t1-lf-2"><img src="img/read.png" />17502</span>                 </div>                 <div class="gpc-video-t1-rt">                   <span>￥15,000</span>起                 </div>                           </div>              <div class="gpc-video-t2">                 <div class="gpc-video-t2-lf">                   <p class="gpc-a1-8"><a href="#">来来</a> <a href="#">发布于</a> <a href="#">2016-06-09</a><a href="#">时长：00:20:00</a></p>                 </div>                 <div class="gpc-video-t2-rt">                   <a class="gpc-a1-9" href="detail.php">查看更多详情>></a>                 </div>                            </div>            </div>            <!--/end-->

 参考技术A

需要JS控制，点击图片生成一个弹窗，同时让其自动播放，点击弹窗上的关闭按钮或者点击弹窗以外的地方销毁弹窗。

 参考技术B

使用html5的video标签，标签先隐藏，给图片增加onclick事件，弹出视频。

    超文本标记语言， 标准通用标记语言下的一个应用。“ 超文本 ”就是指页面内可以包含图片、 链接，甚至音乐、 程序等非文字元素。

    一个网页对应多个 HTML文件， 超文本标记语言文件以.htm为 扩展名或.html为 扩展名。可以使用任何能够生成 TXT类型 源文件的文本编辑器来产生超文本标记语言文件，只用修改文件 后缀即可。

    万维网上的一个 超媒体文档称之为一个 页面。作为一个组织或者个人在 万维网上放置开始点的 页面称为 主页或首页，主页中通常包括有指向其他相关页面或其他节点的指针。

    这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列 页面的有机集合称为 网站。超级文本标记语言是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言。

    网页的本质就是超级文本标记语言，通过结合使用其他的 Web技术，可以创造出功能强大的网页。因而，超级文本标记语言是万维网编程的基础，也就是说 万维网是建立在超文本基础之上的。

如何在同一网页上有不同的视频弹出窗口？

我正在开发一个HTML页面，我希望有不同的图像，并且每个图像都有一个弹出视频。使用代码（html，css，javascript）我可以为一个视频制作这个：当我点击我的图像时，视频会在同一页面中打开。但我需要不同的视频用于不同的图片，并且他们都打开相同的第一个视频。如何将每张图片指向不同的视频？

我尝试在javascript中使用变量，将图像连接到视频ID，每个都有自己的源（链接到视频）现在我尝试为每个视频制作不同的javascript函数（编号为1和2）但是他们仍然打开同样的视频

这是java脚本代码（我在其中添加'1'，我为另一个添加了'2'）（我也尝试使用视频ID）

<script>
window.document.onkeydown = function(e) {
  if (!e) {
    e = event;
  }
  if (e.keyCode == 27) {
    *lightbox_close1*();
  }
}

function *lightbox_open1*() {
  var lightBoxVideo = document.getElementById(**"V1"**);
  window.scrollTo(0, 0);
  document.getElementById('light').style.display = 'block';
  document.getElementById('fade').style.display = 'block';
  lightBoxVideo.play();
}

function *lightbox_close1*() {
  var lightBoxVideo = document.getElementById(**"V1"**);
  document.getElementById('light').style.display = 'none';
  document.getElementById('fade').style.display = 'none';
  lightBoxVideo.pause();
}
</script>

这就是我在html中所拥有的

<div id="light">
  <a class="boxclose" id="boxclose" onclick="*lightbox_close1*();"></a>
  <video id=**"V1"** width="600" controls>
      <source src="10 Creamy  Satisfying Pasta Dishes.mp4" type="video/mp4">
      <!--Browser does not support <video> tag -->
    </video>
</div>

<div id="fade" onClick="*lightbox_close1*();"></div>

<div>
  <a href="#" onclick="*lightbox_open1*();">
  <div class="container">
  <img src="Aperitive.jpg" alt="A" class="image" >
  <div class="overlay">
    <div class="text">Aperitive</div>
  </div>
</div>  
  </a>
</div>

另一个是相同但2而不是1，'**'仅用于粗体（我在css中添加了图像叠加）

答案

我改变了一些代码，但我认为这个概念是一样的。您想要在单击其他元素时更改视频源。在这种情况下是一个图像。

您可以将视频放在模态或弹出窗口中，并将其设置为单击时关闭。 （此功能未包含在示例中）

您需要做的就是在无序列表中添加另一个元素，并将on click函数设置为更改为参数中带有视频元素id的视频。

下面的完整示例只是将您的视频插入video1.mp4并观看魔术发生。

<=========================================

         Edited for clarification

=========================================>

      <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My Vid Stuff</title>
        <style>
            ul{
                list-style: none;
                text-align: center;
                width: 50%;
                border: 1px solid black;
            }
            li{
                display: inline-block;
                border: 1px solid #ccc;
                border-radius: 5px;
                width: 100px;
                height: 100px;
                cursor: pointer;
                margin-right: 16px
            }
        </style>
                <script>

                        //this function takes 2 arguments the video element id
                        //and the video source. 
                        function changeVid(id, video){
                            //set the element for the change
                            var vid = document.querySelector('#' + id + ' source');
                            //change the source of the element
                                vid.src = video;
                            //load the video to play
                                document.querySelector('#' + id).load();
                            //logging purposes to see the change in action (optional)
                            console.log(document.querySelector('#' + id +' source').src);
                        }


                </script>
    </head>
    <body>
        <div class="container">
                <div class="video-wrapper">
                    <video id="myvideo" controls>
                        <source src="video1.m4v" type="video/mp4">
                            Your browser does not support HTML5 video.
                    </video>
                </div>
                <ul>
                    <!-- onclick of user set myvideo <video> to the video source specified -->
                    <li onclick="changeVid('myvideo', 'video1.m4v')" > Cat Video 1</li>
                    <li onclick="changeVid('myvideo', 'video2.m4v')" > Cat Video 2</li>
                </ul>
        </div>

    </body>
</html>

以上是关于html中怎么点击图片弹出视频？的主要内容，如果未能解决你的问题，请参考以下文章

简单点击图片弹出video视频弹窗功能

如何将视频转换成图片

v-html点击图片查看大图功能

html里插入图片怎么显示不出来

wp点击图片弹出

跪求，js手机移动端html点击图片弹出后可触摸屏左右滑动上下张图片的效果