Question

我是新手，我尝试做的是禁用背景（我设法做到这一点），然后显示一个带有视频的模态。

这里是jsfiddle：https://jsfiddle.net/uqu070wz/

js片段：

//function to do the fade in effect
function fadeIn(el) {   
    el.style.opacity = 0;
    var tick = function() {
        el.style.opacity = +el.style.opacity + 0.05;
        console.log(el);
        if (+el.style.opacity <= 0.8) {
            (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 10)
        }
    };
    tick();
}   

function show_modal(){
    document.getElementById('modal-video').style.display = 'block';
}

//plays the video in cinema-view
function play_video(vid){
    var vid = vid;
    //disable background
    var el = document.getElementById("bck");
    document.getElementsByTagName('body')[0].style.overflow = 'hidden';
    fadeIn(el);
    el.style.display = 'block';

    //show video modal
    var el = document.getElementById("modal-video");
    fadeIn(el);
    el.style.opacity ='1';
    setTimeout(show_modal, 800);
    var video = document.getElementById("video1");
    video.src = vid;
}

html片段：

<!-- for the fading effect -->
<div id="bck" class="overlay"></div> 
<div id="modal-video" class="overlay-modal"> 
  <h3>Titulo</h3>
  <video id="video" class="vid" width="100%" autoplay>
      <source id="video1" src="" type="video/mp4">
      <!-- <source src="mov_bbb.ogg" type="video/ogg"> -->
      Your browser does not support HTML5 video.
  </video>
</div>

css片段：

.overlay{
    z-index: 4;
    position: absolute;
    display:none; 
    background-color: #000000;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

.overlay-modal {
    z-index: 5;
    display: none;
    background: #fff;
    padding: 1%;
    width: 40%;
    position: absolute;
    top: 15%;
    left: 50%;
    margin: 0 0 0 -20%; /* add negative left margin for half the width to center the div */
    cursor: default;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0,0,0,0.9);
}

.vid {
    z-index: 6;
}

任何帮助？谢谢！还有一件事......不，我不想使用fancybox或任何其他脚本......我想自己学习。而且我也不想使用JQuery ...... :)

Answer 1

要播放视频，您需要使用<pre id="results"></pre>元素设置<video>并调用src。如果启用了play()，您就不需要致电autoplay。您选择了play()元素来设置视频<source>。见DEMO

HTML

src

JS

<!-- for the fading effect -->
<div id="bck" class="overlay"></div> 
<div id="modal-video" class="overlay-modal"> 
  <h3>Titulo</h3>
  <video id="video_element" class="vid" width="100%" autoplay>
    <source id="video1" src="" type="video/mp4">
    <!-- <source src="mov_bbb.ogg" type="video/ogg"> -->
    Your browser does not support HTML5 video.
  </video>
</div>

使用原始javascript在模态内显示视频

1 个答案: