时间戳

首页 > 解决方案 > 在按钮单击时将视频添加到页面

javascript - 在按钮单击时将视频添加到页面

问题描述

我是 JS 初学者，我正在尝试让视频全屏播放并替换页面下方的不可见 div。我从Chris Ferdinandi的指南开始。

在他的指南中，视频取代了点击的图像。我希望稍后在页面上放置 div 以在单击时替换。

任何指导都会很棒！

HTML

<a data-video="480459339" class="stylsheetref" href="#" target="">Watch the Tour</a>
<div id="video-replace"></div>

Javascript（从本指南修改）

<script>
   if (!Element.prototype.requestFullscreen) {
    Element.prototype.requestFullscreen = Element.prototype.mozRequestFullscreen || Element.prototype.webkitRequestFullscreen || Element.prototype.msRequestFullscreen;
}

// Listen for clicks
document.addEventListener('click', function (event) {

    //Set invisible Div (new code added by me)
    var videonew = '#video-replace');
 
    // Check if clicked element is a video link
    var videoId = event.target.getAttribute('data-video');
    if (!videoId) return;

    // Create iframe
    var iframe = document.createElement('div');
    iframe.innerHTML = '<p>x</p><iframe width="560" height="960" src="https://player.vimeo.com/video/' + videoId + '?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
    var video = iframe.childNodes[1];

    // Replace the image with the video
    event.target.parentNode.replaceChild(video, videonew);

    // Enter fullscreen mode
    video.requestFullscreen();
    
}, false);

</script>

标签： javascript

解决方案

你的代码有问题。

var videonew = '#video-replace');有一个 orphan )，因为您在 `replaceChild` 方法中使用它，我假设您希望变量引用一个元素。

所以改成

var videonew = document.querySelector('#video-replace');

专业提示：在开发过程中使用开发者控制台可以帮助您找出代码中的此类错误。

推荐阅读