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

Наложение встроенного видео YouTube с изображением, скрыть изображение при нажатии и автозапуск

2 голосов
/ 09 февраля 2011

Я хотел бы отобразить изображение перед просмотром видео YouTube на моей странице.Есть ли способ сделать это с помощью jquery или функции javascript.

Я хочу наложить это на собственное изображение, и при нажатии отобразить видео и автоматически воспроизвести его, не перезагружая страницу.1004 * Спасибо за вашу помощь

С уважением, Джуди

Ответы [ 3 ]

4 голосов
/ 30 августа 2012

При использовании HTML5 iframe с YouTube вышеописанное не будет работать, поскольку видео будет воспроизводиться в фоновом режиме с параметром autoplay = 1, установленным ПЕРЕД нажатием на изображение. Вместо этого я использовал .append (), чтобы добавить iframe после нажатия на изображение, чтобы видео автоматически воспроизводилось только после события click для изображения. 

<body>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 

<div id="ytapiplayer2" style="display:none;">
</div>

<img src="https://i.qmyimage.com/mgen/global/zGetImageNew.ms?args=%22shpimg4198.jpg%22,425,96,1" id="imageID" />
<script type="text/javascript">
$('#imageID').click(function() {
$('#ytapiplayer2').show();
$('#ytapiplayer2').append('<iframe width="1130" height="636" src="http://www.youtube.com/embed/YOURVIDEOCODEHERE?autoplay=1" frameborder="0" allowfullscreen></iframe>');
$('#imageID').hide();
});
</script>
</body>
4 голосов
/ 09 февраля 2011

Я сожалею, что последнее решение вашей проблемы было неверным, ну, нет, оно не было, но слишком сложным для того, что вы хотели.

видео на YouTube не воспроизводятся, если они скрыты. поэтому добавьте свой код для встраивания и установите autoplay = 1, но скройте div, а затем сделайте щелчок jquery для элементов. если вы скопируете приведенный ниже код и запустите его, он должен работать (за исключением того, что вы должны указать его своей библиотеке jquery) 

<body>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 

<div id="ytapiplayer2" style="display:none;">
<object width="1280" height="745">
<param name="movie" value="http://www.youtube.com/v/kCfP003Btjw?fs=1&hl=en_US&rel=0&autoplay=1"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/kCfP003Btjw?fs=1&hl=en_US&rel=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="745"></embed>
</object>

</div>


<img src="https://i.qmyimage.com/mgen/global/zGetImageNew.ms?args=%22shpimg4198.jpg%22,425,96,1" id="imageID" />
<script type="text/javascript">
$('#imageID').click(function() {
$('#ytapiplayer2').show();
$('#imageID').hide();
});
</script>
</body>
3 голосов
/ 10 февраля 2011

Поскольку это можно сделать довольно просто с помощью javascript api, я также создал этот эффект с помощью режима New iFrame Embedding (который я нахожу довольно приятным). Это действительно просто

  1. Покажите свое изображение
  2. При нажатии замените его на свой код встраивания iframe (с параметром "autoplay = 1").
...