Question

我正在使用javascript在我的html页面上显示YouTube视频。

如何隐藏视频并使用javascript保留显示视频的页面。

我需要在点击按钮时隐藏视频。

我的代码看起来像这样

function addVideo(qId){
    alert("a video");
    var $videoComp = '<div class="vid" id="myytplayer"><iframe id="ifr" width="560" height="315" src="//www.youtube.com/embed/ac7KhViaVqc" allowfullscreen=""></iframe></div><div class ="main"><button class="btn btn-success" id="one" >Close video</button></div>';
$('.create-elem').append($videoComp);
$(".main").click(function(){
        //$(".vid").hide();
        //$("#one").hide();
    function stopthevideo(){

        var myPlayer = document.getElementById('myytplayer');
        myPlayer.stopVideo();
    }
    });

Answer 1

这是我识别视频结尾的方法。

var myVideo = document.getElementById("video1");

myVideo.addEventListener('ended',onVideoEnded,false);

function onVideoEnded(e) {
    if(!e) { e = window.event; }
            // Make your things here
            hideVideo = true;
}

或者您可以随时尝试使用https://developers.google.com/youtube/js_api_reference#Playback_status

希望其中一个能帮到你：）

Answer 2

尝试在已结束的事件中设置视频位置：

在loadedmetadata事件后将开始时间和持续时间保存到变量。

var myVideo = document.getElementById("video1");

var videoStartTime = 0;
var videoEndTime = 0;

myVideo.addEventListener('loadedmetadata', function() {
  videoStartTime = 2;
  videoEndTime = 4;
  this.currentTime = videoStartTime;
}, false);

如果当前时间大于开始时间加上视频时间结束，请暂停视频。

myVideo.addEventListener('timeupdate', function() {
  if(this.currentTime > videoStartTime + videoEndTime ){
    this.pause();
  }
});

使用javascript事件以HTML格式结束视频？

2 个答案: