Видео YouTube в моем скрытом DIV начинает загружаться только после того, как DIV показан - PullRequest
Новая
       16

Видео YouTube в моем скрытом DIV начинает загружаться только после того, как DIV показан

4 голосов
/ 21 июля 2009

У меня есть клип Youtube в скрытом DIV на моей странице.

После загрузки страницы я хотел, чтобы видео спокойно загружалось в фоновом режиме, чтобы, когда пользователь нажимает кнопку, чтобы «скрыть» DIV, видео было готово к работе.

Но, как у меня сейчас, видео начинает загружаться только после того, как пользователь нажимает кнопку.

Могу ли я внести изменения, чтобы загружать видео в фоновом режиме, а затем просто скрывать или показывать его в зависимости от нажатия кнопки? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
   <script type="text/javascript">
    $(document).ready(function()
    {
      $("#show_video").click(function(){
          $("#hello").show();  
      });
    });
    </script>

</head>

<body>

<button id="show_video">Show The Video</button>
<div id="hello" style="display:none;">
<object width="630" height="380"><param value="http://www.youtube.com/v/UyyjU8fzEYU&amp;ap=%2526fmt%3D22" name="movie"><param value="window" name="wmode"><param value="true" name="allowFullScreen"><embed width="630" height="380" wmode="window" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/UyyjU8fzEYU&amp;ap=%2526fmt%3D22"></object>
</div>


</body>
</html>

Ответы [ 3 ]

8 голосов
/ 21 июля 2009

Да. Используйте visibility:hidden вместо display:none. display:none означает, что элемент не отображается как часть DOM, поэтому он не загружается, пока свойство display не изменится на что-то другое. visibility:hidden загружает элемент, но не показывает его.

Попробуйте это: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
       <script type="text/javascript">
        $(document).ready(function()
        {
          $("#show_video").click(function(){
              $("#hello").css('visibility','visible'); 
          });
        });
        </script>

    </head>

    <body>

    <button id="show_video">Show The Video</button>
    <div id="hello" style="visibility:hidden;">
    <object width="630" height="380"><param value="http://www.youtube.com/v/UyyjU8fzEYU&amp;ap=%2526fmt%3D22" name="movie"><param value="window" name="wmode"><param value="true" name="allowFullScreen"><embed width="630" height="380" wmode="window" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/UyyjU8fzEYU&amp;ap=%2526fmt%3D22"></object>
    </div>


    </body>
    </html>
1 голос
/ 21 июля 2009

Я думаю, вам также нужно показать видео. Вы когда-нибудь замечали на встроенных видео на веб-страницах, что они даже не показывают статическое изображение для предварительного просмотра, пока не перейдут в режим просмотра?

Я думаю, что вы будете бороться с алгоритмами YouTube на этом. вероятно, их цель - НЕ загружать видео, пока пользователь не нажмет на них.

0 голосов
/ 05 февраля 2014

Вы можете просто использовать show () и hide () в Jquery. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
   <script type="text/javascript">
    $(document).ready(function()
    {
        $("#hello").hide(); 
      $("#show_video").click(function(){
          $("#hello").show();  
      });
    });
    </script>

</head>

<body>

<button id="show_video">Show The Video</button>
<div id="hello" >
<object width="630" height="380"><param value="http://www.youtube.com/v/UyyjU8fzEYU&amp;ap=%2526fmt%3D22" name="movie"><param value="window" name="wmode"><param value="true" name="allowFullScreen"><embed width="630" height="380" wmode="window" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/UyyjU8fzEYU&amp;ap=%2526fmt%3D22"></object>
</div>


</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...