Как создать эффект лайтбокса для видео, созданного с помощью HTML5? - PullRequest
Новая
       0

Как создать эффект лайтбокса для видео, созданного с помощью HTML5?

2 голосов
/ 14 июня 2011

Я создал одно видео с использованием тегов HTML 5 видео.Видео в 3 различных форматах с резервной вспышкой.Можно ли отобразить его с помощью эффекта «лайтбокс».Ниже приведен мой код: - 

<script type="text/javascript" src="http://static.flowplayer.org/js/flowplayer-   3.2.6.min.js"></script>  
<link rel="stylesheet" href="../../stylesheets/styles.css" />
</head> 
<body> 

<div id="videocontent"> 
<video width="640" height="360" preload="auto" controls poster="http://www.synergese.co.uk/testMathsOnline/day3/videos/day3Wel.jpg" tabindex="0" >
<source src="http://www.synergese.co.uk/testMathsOnline/day3/videos/fracWelDay3.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="http://www.synergese.co.uk/testMathsOnline/day3/videos/fracWelDay3.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="http://www.synergese.co.uk/testMathsOnline/day3/videos/fracWelDay3.ogv" type='video/ogg; codecs="theora, vorbis"'>

<a href="http://www.synergese.co.uk/testMathsOnline/day3/videos/fracWelDay3.mp4" 
style="display:block;width:640px;height:360px;" 
id="player"></a>
</video> 
</div>

<!-- this script block will install Flowplayer inside previous A tag --> 
<script language="JavaScript"> 
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");
</script>   
</body>

Мои навыки работы с JavaScript очень ограничены, поэтому я очень признателен за любую помощь.Спасибо, Пиппа

Ответы [ 3 ]

2 голосов
/ 14 июня 2011

Вы можете использовать любую библиотеку JavaScript лайтбокса.Например, наложение jquery-tools: http://flowplayer.org/tools/overlay/index.html

Просто возьмите один из примеров на странице и измените содержимое наложения с помощью HTML вашего видеоплеера.

1 голос
/ 14 июня 2011

Вы можете использовать лайтбокс jQuery, его легко настроить: просто скачайте его с http://leandrovieira.com/projects/jquery/lightbox/ и посмотрите раздел Как использовать на странице, чтобы узнать, как его использовать.

Ad @ m

1 голос
/ 14 июня 2011

попробуйте http://videolightbox.com/

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

Нет похожих вопросов

...