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

我在这方面是新手，我尝试做的是禁用背景（我设法做到了），然后显示一个包含视频的模式

这里是JSIDLE：

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;
}

.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…：）

要播放视频，需要使用

元素设置

src

并调用

play（）

。如果启用了

autoplay

，则无需调用

play（）

。您正在选择

元素来设置视频

src

。看这里

HTML

提特罗
您的浏览器不支持HTML5视频。

JS

//执行淡入效果的函数
函数fadeIn（el）{
el.style.opacity=0；
el.style.display=“块”；
var tick=函数（）{
el.style.opacity=+el.style.opacity+0.05；
如果（+el.style.opacity要播放视频，需要使用
元素设置
src
并调用
play（）
。如果启用了
autoplay
，则不需要调用
play（）
。您正在选择
元素来设置视频
src
。请参见此处

HTML


提特罗
您的浏览器不支持HTML5视频。

JS

//执行淡入效果的函数
函数fadeIn（el）{
el.style.opacity=0；
el.style.display=“块”；
var tick=函数（）{
el.style.opacity=+el.style.opacity+0.05；
如果（+el.style.opacity你想实现什么？要在模式内播放视频？@PalinDrome555正确。视频应该出现在白色模式内，黑色背景无效。检查下面我的答案中的JSFIDLE。你想实现什么？要在模式内播放视频？@PalinDrome555正确。视频uld出现在白色模态中，黑色背景无效从我下面的答案中检查JSFIDLE。天哪……我简直不敢相信我在将参数传递给模态时犯了一个小错误……但多亏了你，我才得以解决。谢谢你，它现在工作得很好。天哪……我简直不敢相信我在将参数传递给模态时犯了一个小错误模态…但多亏了你，我才能把它弄出来。谢谢你，它现在工作得很好
.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;
}

<!-- 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>

//function to do the fade in effect
function fadeIn(el) {   
  el.style.opacity = 0;
  el.style.display = "block";
  var tick = function() {
    el.style.opacity = +el.style.opacity + 0.05;
    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);
   //To set the source you need to select the video element
   var video = document.getElementById("video_element");
   video.src = vid;       
}

var overlay = document.getElementById('bck');
fadeIn(overlay);
play_video("http://media.w3.org/2010/05/sintel/trailer.mp4");