视频播放后显示弹出链接

Question

我正在处理这个site主页滑块有一个带有标签的选项观看视频我已将以下代码添加到我的模板中以使视频正常工作。

<script>
function videoshow()
 {
 document.getElementById("sliders-container").style.display="none";
 document.getElementById("show-video").style.display="block";
document.getElementById("show-video").innerHTML="<span id='close-button' onclick='closevideo()'>close</span><video id='example_video_1' class='video-js vjs-default-skin' controls   width='100%' data-setup='{}' autoplay><source src='http://constantin-entertainment.info/king/wp-content/themes/Avada/video/sample11.mp4' type='video/mp4' /><source src='http://video-js.zencoder.com/oceans-clip.webm' type='video/webm' /><source src='http://video-js.zencoder.com/oceans-clip.ogv' type='video/ogg' /><track kind='captions' src='demo.captions.vtt' srclang='en' label='English'></track><!-- Tracks need an ending tag thanks to IE9 --><track kind='subtitles' src='demo.captions.vtt' srclang='en' label='English'></track><!-- Tracks need an ending tag thanks to IE9 --><p class='vjs-no-js'>To view this video please enable JavaScript, and consider upgrading to a web browser that <a href='http://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a></p> </video>";
 }

function closevideo()
{

   document.getElementById("show-video").style.display="none";
    document.getElementById("show-video").innerHTML="";
     document.getElementById("sliders-container").style.display="block";

} 

</script>

以及下面的 div 用于显示视频

<div id="show-video">

</div>

并调用以下文件

<link href="<?php bloginfo('template_directory'); ?>/css/video-js.css" rel="stylesheet" type="text/css">
<script src="<?php bloginfo('template_directory'); ?>/js/video.js"></script>

视频正在所有浏览器中播放。现在我想要一个像“联系我”这样的框悬停在我的联系表单的链接上。所以我在网上搜索并应用了以下内容代码

<script>
var video = document.getElementsByTagName('video')[0];

video.onended = function(e) {
  <a href="#contact">Conatct Me</a>
};
</script>

但没有帮助。不知道我哪里出错了。

Answer 1

我认为你的语法错误。

代码应该是这样的

<script>
    var video = document.getElementsByTagName('video')[0];
    video.onended = function () {

        $('<a href="#contact">Conatct Me</a>').appendTo('#example_video_1');

    };  
    </script>

Answer 2

我会为此使用 JQuery，只需下载 js 文件，然后将它们包含在您的文件中：

<script src="[path]"></script>

现在你可以这样做了：

<script>
window.onload = function(){
   var video = document.getElementsByTagName('video')[0];
   video.onended = function(e) {
      $('#contact').html('<a href="#contact">Conatct Me</a>');
   }
}

</script>

如果这不起作用，请将 JS 错误写为注释。

编辑：

完全忘记了你也可以在没有任何 JQuery 的情况下更改 DIV 中的文本：

<script> 
    document.getElementById('contact').innerHTML = '<a href="#contact">Conatct Me</a>'; 
</script>