显示视频播放后弹出链接

show a popup link after video play

本文关键字：链接 视频 播放 显示      更新时间：2023-09-26

我正在这个网站上工作主页滑块有一个标签选项观看视频，我已经将下面的代码添加到我的模板中以使视频工作

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

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

我觉得你的语法写错了。

代码应该是这样的

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

我会使用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错误写为注释。

编辑:

完全忘记了，你也可以改变DIV中的文本没有任何JQuery:

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