Как открыть окно jQuery для проигрывания видео YouTube?
Мне нужно это видео для проигрывания автоматически. Это было бы хорошо, этот код может играть видео из других источников как Yahoo и т.д. Также возможно использовать HTML5 вместо jQuery?
4 ответа
Функция или плагин, который вы используете для отображения всплывающего окна, вероятно, будет отличаться от того, что вы используете для отображения видео. В этом примере я использовал Overlay Plugin из jQuery Tools для отображения модала, а затем использовал swfobject для отображения YouTube Flash Player. В качестве альтернативы можно использовать HTML5-видеоплеер с Flash fallback для отображения видео, но для этого все равно потребуется сначала вывести на экран модальное окно.
<a href="http://www.youtube.com/v/2cxqZiWyW3g&hl=en_US&fs=1&autoplay=1"
class="video-link">Video 1</a>
<a href="http://www.youtube.com/v/607RMNoJfl4&hl=en_US&fs=1&autoplay=1"
class="video-link">Video 2</a>
<div class="modal" id="video-modal">
<div id="video-container" style="width: 425px; height: 344px;"></div>
</div>
<script language="javascript" type="text/javascript">
$(function() {
var videoModal = $('#video-modal').overlay({
expose: {
color: 'black',
loadSpeed: 200,
opacity: 0.85
},
closeOnClick: true,
api: true
});
$('.video-link').click(function() {
videoModal.load();
var videoUrl = $(this).attr('href');
var flashvars = {};
var params = {
allowFullScreen: "true",
allowscriptaccess: "always"
};
var attributes = {};
swfobject.embedSWF(videoUrl, 'video-container', '425', '344', '9.0.0', '', flashvars, params, attributes);
return false;
});
});
</script>
PrettyPhoto - это чистая библиотека JavaScript, которая отображает изображения и видео в виде лайтбокса.
Для ваших целей вам нужно пометить ссылку YouTube специальным атрибутом rel, видео откроется во всплывающем окне.
SimpleModal - отличный плагин jQuery, поскольку он предлагает множество различных опций, одним из которых является отображение внешнего контента:
// Display an external page using an iframe
var src = "http://365.ericmmartin.com/";
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
closeHTML:"",
containerCss:{
backgroundColor:"#fff",
borderColor:"#fff",
height:450,
padding:0,
width:830
},
overlayClose:true
});
Билл Беккельман имеет большую серию учебников по интеграции SimpleModal с Asp.Net в качестве пользовательского диалогового окна подтверждения. Он демонстрирует, как создать отличную функциональность на стороне клиента, а также как отправить обратно на сервер. это действительно помогло мне поработать вокруг того, как лучше всего интегрировать jQuery с ASP.Net.