Question

我想在点击图片时显示一个视频播放器弹出窗口。我不希望播放器嵌入页面并默认可见。

HTML：

<a href="#popupVideo" data-rel="popup" data-position-to="window" class=
    "ui-btn ui-corner-all ui-shadow ui-btn-inline"><img class="..." src="...chuck.jpg"></a>

<div data-role="popup" id="popupVideo" data-overlay-theme="b" data-theme="a" data-tolerance="15,15" class="ui-content">
       <iframe src="http://player.vimeo.com/video/41135183?portrait=0" width="497" height="298"seamless=""></iframe>
</div>

Javascript已超过here

Answer 1

这里有一个名为EventHandlers的函数，它将eventlistener添加到类名为Vids的每个元素中。每个视频的ID将用于设置iframe src。

实施例

http://player.vimeo.com/video/41135183?portrait=0

此视频的

ID = 41135183。您的图片ID应设置为您要播放的视频ID。

您需要添加自己的样式，但功能完全在这里并正常工作。

我希望这有帮助，如果确实如此，请务必将问题标记为已回答。谢谢。

    <script>
function EventHandlers(){
document.getElementById("ExtVid").addEventListener("click",function(event){CloseVid();},false);
//Set events for all images with the class Vids
Vids=document.getElementsByClassName('Vids');
for(var i=0;i<Vids.length;i++){
  Vids[i].addEventListener("click",function(event){VideoDisplay(event);},false);
}
}
function VideoDisplay(e){
//Check & remove Iframe.
if(document.getElementById('VidFrame')){
    console.log("removing Video Frame");
    var VidFrame=document.getElementById('VidFrame');
    VidFrame.parentNode.removeChild(VidFrame);
}
    //Buile the Iframe
    var VidID=e.target.id;
    var target = document.getElementById('VideoPopup');
    var element = document.createElement('iframe');
        element.setAttribute('id', 'VidFrame');
        element.setAttribute('src', 'http://player.vimeo.com/video/'+VidID+'?portrait=0');
        element.setAttribute('height', '298');
        element.setAttribute('width', '497');
        element.setAttribute('frameborder', '0');
        target.appendChild(element);
document.getElementById("VideoPopup").style.display="inline";
}
function CloseVid(){
if(document.getElementById('VidFrame')){
    console.log("removing Video Frame");
    var VidFrame=document.getElementById('VidFrame');
    VidFrame.parentNode.removeChild(VidFrame);
}
document.getElementById("VideoPopup").style.display="none";
}
</script>

<body onload="EventHandlers();">
<img class="Vids" id="41135183" src="#"/>
<img class="Vids" id="41135181" src="#"/>
<img class="Vids" id="41135176" src="#"/>
<div id="VideoPopup" style="display:none;height:100%;width:100%;position:fixed;top:0;left:0;z-index:10;background:rgba(0,0,0,.4);">
<iframe id="VidFrame"></iframe>
<button id="ExtVid" style="position:absolute;top:10px;right:10px;"> Close Video </button>
</div>
</body>

iframe的视频弹出窗口无法正常工作

1 个答案: