WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
HTML5 / Media

HTML5 Blue Video Gallery

— Add-On para WorldWideScripts.net

@pt1wwsAssine o nosso feed para se manter atualizado!

Novo! Siga-nos o que você quiser!


HTML5 Blue Video Gallery - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Envato AftESS Fórum FASTSI.FPORT

Intro

Quer uma galeria de vídeo que é fácil de instalar, personalizar, funciona em todos os navegadores (mesmo IE8), é de até as mais recentes normas (html5), tem também suporte multimídia (áudio / imagens), pode alimentar a partir de provedores de compartilhamento de vídeo (youtube / vimeo)? Então esta é a Galeria de vídeos para mostrar seus vídeos em seu site.

A galeria funciona em todos os principais navegadores ambiente - incluindo o IE através de flash-back queda. Além disso, através da introdução de um único vídeo na galeria de vídeo, torna-se um player de vídeo.

Esta galeria utiliza as mais recentes tehniques HTML5. Por exemplo - ele usa HTML5 LocalStorage para lembrar o último volume você tinha antes de sair e define que o volume de volta quando você voltar. A pele é a configuração via CSS simples - por isso é totalmente capaz pele com CSS básico

Atualizações

ATUALIZAÇÃO 8,00 [2014/09/22]

  • [FIX] alguns bugs

ATUALIZAÇÃO 7,50 [2014/04/08]

  • [TWEAK] transita agora muito mais suave
  • [TWEAK] atualização de pré-visualização

ATUALIZAÇÃO 7,44 [2014/03/26]

  • [FIX] múltiplos bugs
  • [FIX] pré-visualização
  • [FIX] adicionar suporte a legendas

ATUALIZAÇÃO 6,78 [2013/10/14]

  • [FIX] múltiplos bugs

ATUALIZAÇÃO 6,10 [2013/10/02]

  • [Correção] bug no fim do vídeo do youtube, o áudio ainda iria jogar
ATUALIZAÇÃO 5,11 [2013/10/02]
  • fixa um bug fatal IE9 / IE10
  • atualizado para trabalhar com jQuery 1.9.1, sem plug-in de migração
ATUALIZAÇÃO 5.00 [2013/01/10]
  • adicionou botão HD para vídeos do YouTube
  • adicionada nova maneira de rolar os thumbsandarrows do menu (veja demonstração Canal YouTube na pré-visualização)
  • adicionados três novos modos - rotador, rotator3d e parede
  • peles para galeria e jogador são agora independentes
  • adicionou nova galeria de pele - nav_transparent - itens de menu de navegação circular e transparente
  • adicionada nova pele impressionante para o jogador - aurora
  • documentação atualizada
  • outros bugs corrigidos
ATUALIZAÇÃO 4,10 [2012/10/22]
  • fullscreen erros fixos (funciona perfeitamente no Safari, Chrome, Firefox e futuros navegadores compatíveis)
  • acrescentou advertisement apoio - imagem / ad youtube ou vídeo
  • outros bugs corrigidos
ATUALIZAÇÃO 4.0 [05/02/2012]
  • corrigidos alguns erros
  • galeria de vídeos mudou e vídeo estrutura jogador DOM
  • adicionou uma nova barra de buffer
  • suporte adicional Vimeo
  • suporte de áudio adicionado
  • suporte imagem adicionada
  • botão Incorporar adicionado
  • botão de compartilhamento acrescentado
  • fullscreen acrescentado real para o Chrome, Safari, Firefox
ATUALIZAÇÃO 3.0 [2012/02/23]
  • corrigidos alguns erros
  • documentação reestruturado
  • galeria de vídeos mudou e vídeo estrutura jogador DOM

ATUALIZAÇÃO 2.0 [07/09/2011]

  • corrigidos alguns erros
  • iPod / iPad / iPhone suportes
  • atualizado para os mais recentes padrões HTML5

Características

  • focar o vídeo - o botão de tela cheia de deixá-lo desfrutar o vídeo na janela do navegador inteira
  • html5 alimentado - elemento de vídeo HTML5 e javascript localStorage torna esta uma galeria de vanguarda
  • lembra as suas preferências - este jogador usa LocalStorage HTML5, a fim de armazenar o último volume de ter definido, então quando você fechar a página e abri-lo mais tarde, o volume é parte traseira direita onde você deixou
  • compatível com os principais navegadores, incluindo o IE - fornece fallback flash para os navegadores que não suportam a tag de vídeo (você pode especificar que o vídeo para jogar através de FlashVars) o flash player de vídeo tem a mesma pele como o padrão assim que olha o mesmo em todas as plataformas
  • dispositivos de toque desta galeria foi otimizado Apple - iPhone / iPad compatíveis
  • css peles alimentado - a galeria css está dividido em duas partes - funcional e estethic por isso é muito fácil de fazer sua própria pele

    Ativos

    Vídeo de - http://www.bigbuckbunny.org/

    FAQ

    Primeiro vídeo funciona bem, mas, segundo vídeo não carregar em tudo
    Muito provavelmente você está testando e ter anexado o mesmo vídeo do youtube. Você não pode ter o mesmo vídeo do youtube em 2 lugares.
    como faço para inserir links Vimeo para ele?
    basta adicionar esta marcação dentro da VideoGallery-con
     <Tipo de dados div class = "VPlayer-tobe" data-videoTitle = 'vídeo Vimeo' = "vimeo"-src dados = "31539657"> <div class = "menuDescription"> <img src = "http: // dummyimage.com / 50x50 / 000000 / fff & text = polegar "class =" imgblock "/> <div class =" o título "> Este é um vídeo Vimeo </ div> A miniatura pode gerar automaticamente... </ div> </ div> 
    Alterar o valor de src dados com o ID do seu vídeo vimeo
    Isso pode ser usado para vídeos que não estão no Vimeo ou YouTube? Tenho alguns vídeos hospedados em um servidor que eu gostaria de vincular a diretamente. Por favor, deixe-me saber o mais cedo possível. obrigado
    Claro, ele é feito especificamente para jogar auto hospedado vídeos. YouTube e Vimeo são apenas um bônus.
    Como faço para obter os ícones de mídia social para o trabalho?
    verifique a definição shareCode para a função vGallery
    Como posso fazer o meu vídeo corretamente codificado para usar dentro desta galeria?

    Você precisa do seu filme convertido em 2 formatos, a fim de garantir que reproduz o vídeo HTML5 em todos os navegadores

    Suporte ao navegador e codificação programa recomendado

    IE9, IE8 (Flash) & Safari: M4V -> http://handbrake.fr/

    Chrome e Opera e Firefox: OGG-> http://video.online-convert.com/convert-to-ogg

    Vídeo estrutura DOM

     <Div class = "VPlayer"-descrição de dados = "My Video" data-img src = "img / 1.jpg"> <Controles de vídeo pré-carga> <Source src = "vídeo / myvideo.m4v" /> <Source src = "vídeo / myvideo.ogg" /> <tipo de objeto = dados "application /-shockwave-flash" x = "width preview.swf" = "550" height = "300" id = estilo "flashcontent" = "visibilidade: visível;"> <Param name = value "filme" = "preview.swf"> <param name = value "menu" = "false"> <param name = value "allowScriptAccess" = "always"> <Name = value "escala" param = "noScale"> <param name = value "allowFullScreen" = "true"> <param name = value "wmode" = "opaco"> <Param name = "flashvars" value = "video = vídeo / myvideo.m4v"> </ Object> </ Video> </ Div> 

    Eu tenho o meu vídeo pronto, como faço para adicioná-lo whitin galeria?

    Melhor maneira de aprender que, se você não for consistente com HTML é pelo exemplo. Open source / index.html e em torno da linha 122 você verá:

    [..]
    <Div class = "VPlayer"-descrição de dados = "<img src = 'img / thumb.png' class = 'imgblock' /> Vídeo 5"-img dados = "img / 1.jpg">

    <Controles de vídeo pré-carga>
    <Source src = "vídeo / test.mp4" type = "vídeo / mp4; codecs = "avc1.42E01E, mp4a.40.2" '/>
    <Source src = "vídeo / test.webm" type = "vídeo / webm; codecs = "VP8, vorbis" "/>
    <Source src = "vídeo / test.ogg" type = "vídeo / ogg; codecs = "theora, vorbis" "/>
    <Source src = "vídeo / bubbles.m4v" />

    <Object width = "500" height = "300">
    <Param name = "movie" value = "preview.swf? Video = vídeo / advideo.flv"> </ param>
    <Param name = value "allowFullScreen" = "true"> </ param>
    <Param name = value "allowScriptAccess" = "always"> </ param>
    <Param name = value "wmode" = "opaco"> </ param>
    <Embed src = "preview.swf? Video = vídeo / advideo.flv" type = "application /-shockwave-flash x" width = "500" height = "300" allowscriptaccess = "always" allowFullScreen = "true" wmode = "opaco">
    </ Embed>
    </ Object>
    </ Video>
    </ Div>

    </ Div> <! -END GALERIA DE VÍDEOS ->

    Este representa o último vídeo na galeria, e é um bom exemplo, então vamos clonar isso e nomeá-lo, em vez de Vídeo 6 Vídeo 5

    [..]
    <Div class = "VPlayer"-descrição de dados = "<img src = 'img / thumb.png' class = 'imgblock' /> Vídeo 5"-img dados = "img / 1.jpg">

    <Controles de vídeo pré-carga>
    <Source src = "vídeo / test.mp4" type = "vídeo / mp4; codecs = "avc1.42E01E, mp4a.40.2" '/>
    <Source src = "vídeo / test.webm" type = "vídeo / webm; codecs = "VP8, vorbis" "/>
    <Source src = "vídeo / test.ogg" type = "vídeo / ogg; codecs = "theora, vorbis" "/>
    <Source src = "vídeo / bubbles.m4v" />

    <Object width = "500" height = "300">
    <Param name = "movie" value = "preview.swf? Video = vídeo / advideo.flv"> </ param>
    <Param name = value "allowFullScreen" = "true"> </ param>
    <Param name = value "allowScriptAccess" = "always"> </ param>
    <Param name = value "wmode" = "opaco"> </ param>
    <Embed src = "preview.swf? Video = vídeo / advideo.flv" type = "application /-shockwave-flash x" width = "500" height = "300" allowscriptaccess = "always" allowFullScreen = "true" wmode = "opaco">
    </ Embed>
    </ Object>
    </ Video>
    </ Div>
    <Div class = "VPlayer"-descrição de dados = "<img src = 'img / thumb.png' class = 'imgblock' /> Vídeo 6"-img dados = "img / 1.jpg">

    <Controles de vídeo pré-carga>
    <Source src = "vídeo / test.mp4" type = "vídeo / mp4; codecs = "avc1.42E01E, mp4a.40.2" '/>
    <Source src = "vídeo / test.webm" type = "vídeo / webm; codecs = "VP8, vorbis" "/>
    <Source src = "vídeo / test.ogg" type = "vídeo / ogg; codecs = "theora, vorbis" "/>
    <Source src = "vídeo / bubbles.m4v" />

    <Object width = "500" height = "300">
    <Param name = "movie" value = "preview.swf? Video = vídeo / advideo.flv"> </ param>
    <Param name = value "allowFullScreen" = "true"> </ param>
    <Param name = value "allowScriptAccess" = "always"> </ param>
    <Param name = value "wmode" = "opaco"> </ param>
    <Embed src = "preview.swf? Video = vídeo / advideo.flv" type = "application /-shockwave-flash x" width = "500" height = "300" allowscriptaccess = "always" allowFullScreen = "true" wmode = "opaco">
    </ Embed>
    </ Object>
    </ Video>
    </ Div>

    </ Div> <! -END GALERIA DE VÍDEOS ->





    FIY, esta galeria é criada pelo autor do best-seller, galeria de estoque maior de recursos na internet que recebe atualizações constantes (mais de 10 até agora)
    peles do iPad iPhone Compal FlashVars Minut skinable erabIed videos7 e moe local! Envato AftESS Fórum FASTSI.FPORT

  • Download
    Outros componentes nesta categoriaTodos os componentes deste autor
    ComentáriosPerguntas mais frequentes perguntas e respostas

    Propriedades

    Criado:
    03 de setembro 10

    :
    Última Atualização 22 de setembro 14

    alta resolução:
    Sim

    Navegadores compatíveis:
    IE7, IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

    Arquivos incluídos:
    JavaScript JS, HTML, CSS, SWF / FLV

    Software Version:
    HTML5

    Palavras-chave

    eCommerce, todos os itens, descriç, ã, o, flash, fallback flash, flashvars, fullscren, galeria, grá, ficos, html5, ou seja, imagens, informaç, õ, es, localStorage, ví, deo, volume, xml