Страница не загружается после загрузки видео

Question

Это следующая ситуация. У меня есть веб-сайт с изображением, и если вы нажмете на изображение, изображение должно быть заменено видео, которое запускается автоматически.

Мой код это выглядит следующим образом:

HTML:

<div id="heaven-video"> 
    <img src="/images/heavenpicture_08.png" width="100%" height="auto" onclick="startVideo()"/> 
    <video width="100%" height="auto" controls="true"> 
    <source src="videos/heavenmovie.mp4" type="video/mp4"/> 
     Your browser does not support HTML5 video. 
    </video> 
</div> 

JS:

function startVideo() { 
    $("#heaven-video video").get(0).load(); 
    $("#heaven-video video").on('loadeddata', function(e) { 
    $("#heaven-video img").css("display", "none"); 
    $(this).css("display", "block"); 
    $(this).get(0).play(); 
    }); 
} 

CSS:

#heaven-video { 
    position: absolute; 
    left: 38.2%; 
    top: 16.9%; 
    width: 29.1%; 
    height: auto; 
} 

#heaven-video video { 
    display: none; 
} 

Это работает до сих пор (когда вы щелкните по изображению, видео будет загружаться, и когда загрузка завершена, изображение будет заменено видео, и оно начнется автоматически).

Но если вы хотите перезагрузить страницу сейчас, она загружается бесконечно. Так что ничего не происходит!

Это похоже, как будто в коде есть бесконечный цикл или что-то в этом роде. Я думаю, может быть, это из-за EventListener? Я попытался добавить это «$ (« # небесное видео »). Off();" в вызываемой функции, когда запускается событие-слушатель. Но это ничего не меняет.

Любые идеи?

Благодарим за помощь.

Answer 1

 $(document).ready(function() { 
      $('body').bind('beforeunload',function(){ 
       //do something 
       //$("#heaven-video video").currentTime = 0; 
      }); 
      function startVideo() { 
       $("#heaven-video video").get(0).load(); 
       $("#heaven-video video").on('loadeddata', function(e) { 
       $("#heaven-video img").css("display", "none"); 
       $(this).css("display", "block"); 
       $(this).get(0).play(); 
       }); 
      } 
     });