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错误写为注释。

修改

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

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

在视频播放后显示弹出链接

2 个答案: