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 sa WorldWideScripts.net

Mag-subscribe sa aming mga feed upang manatili hanggang sa petsa!

Bago! Sundin amin sa gusto mo!


HTML5 Blue Video Gallery - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

envato AftESS SUPPORT Forum FASTSI.FPORT

Intro

Gusto ng isang Video Gallery na madaling i-install, i-customize, ay gumagana sa lahat ng mga browser (kahit IE8), ay hanggang sa ang pinakabagong mga pamantayan (HTML5), ay may suporta multimedia masyadong (audio / imahe), maaaring feed mula sa pagbabahagi ng video provider (youtube / vimeo)? At ito ay ang Video Gallery upang ipakita ang iyong mga video sa iyong site.

Gumagana ang gallery sa lahat ng mga pangunahing kapaligiran mga browser - kabilang ang IE sa pamamagitan ng flash fall-back. Gayundin, sa pamamagitan ng inputting ng isang solong video sa video gallery, ito ay nagiging isang video player.

Ay gumagamit ng gallery na ito sa pinakabagong HTML5 tehniques. Halimbawa - ito ay gumagamit ng HTML5 localStorage na matandaan ang huling dami mo ay bago lumabas ka at nagtatakda sa likod ng lakas ng tunog na kapag dumating ka pabalik. Ang skin ay setup sa pamamagitan ng simpleng CSS - kaya ito ay ganap na skin-able sa basic CSS

Updates

UPDATE 8.00 [2014/09/22]

  • [Ayusin] ilang bugs

UPDATE 7.50 [2014/04/08]

  • [Pagsabunot] transisyon ngayon marami smoother
  • [Pagsabunot] update preview

UPDATE 7.44 [2014/03/26]

  • [Ayusin] maramihang bugs
  • [Ayusin] preview
  • [Ayusin] magdagdag ng suporta subtitle

UPDATE 6.78 [2013/10/14]

  • [Ayusin] maramihang bugs

UPDATE 6.10 [2013/10/02]

  • [Fix] bug sa pagtatapos ng youtube video, ay i-play pa rin ang audio
UPDATE 5.11 [2013/10/02]
  • fixed isang nakamamatay IE9 / IE10 bug
  • update sa trabaho sa jquery 1.9.1 walang migrate plugin
UPDATE 5.00 [2013/01/10]
  • naidagdag button HD para sa mga video sa YouTube
  • nagdagdag ng bagong mga paraan upang mag-scroll sa menu thumbsandarrows (check demo YouTube Channel sa preview)
  • idinagdag ng tatlong bagong mga mode - pampainog, rotator3d at dingding
  • skin para sa gallery at player ay malayang ngayon
  • nagdagdag ng bagong skin gallery - nav_transparent - menu item pabilog at transparent navigation
  • nagdagdag ng bagong mga kasindak-sindak skin para sa mga player - Aurora
  • update babasahin
  • iba pang mga bug naayos
UPDATE 4.10 [2012/10/22]
  • fixed fullscreen bugs (gumagana ganap na ganap sa Safari, Chrome, Firefox at hinaharap sang browser)
  • idinagdag na suporta advertisement - image / youtube o video ad
  • iba pang mga bug naayos
UPDATE 4.0 [2012/05/02]
  • naayos ng ilang mga bug
  • nagbago gallery ng video at video structure na player DOM
  • nagdagdag ng isang bagong buffering bar
  • naidagdag Vimeo support
  • idinagdag na suporta audio
  • idinagdag na suporta image
  • naidagdag button embed
  • naidagdag button share
  • naidagdag real fullscreen para sa Chrome, Safari, Firefox
UPDATE 3.0 [2012/02/23]
  • naayos ng ilang mga bug
  • restructured babasahin
  • nagbago gallery ng video at video structure na player DOM

UPDATE 2.0 [2011/07/09]

  • naayos ng ilang mga bug
  • suporta iPod / iPad / iPhone
  • update sa mga pinakabagong mga pamantayan HTML5

Mga Tampok

  • tumutok sa mga video - ang pindutan ng fullscreen hahayaan enjoy mo ang video sa buong browser window
  • HTML5 pinapatakbo - HTML5 element video & javascript localStorage gumagawa ito ng isang pagputol gilid gallery
  • Naaalala ang iyong mga kagustuhan - player na ito ay gumagamit ng localStorage HTML5 sa order sa store huling volume na iyong itinakda, kaya kapag isinara mo ang pahina at buksan ito mamaya, ang lakas ng tunog ay karapatang-back kung saan ka tumigil ito
  • compatible sa lahat ng mga pangunahing browser, kabilang ang IE - nagbibigay ng flash fallback para sa mga browser na hindi sumusuporta sa tag ng video (maaari mong tukuyin kung aling mga video upang i-play sa pamamagitan ng FlashVars) ang flash video player ay may parehong balat bilang ang default na isa kaya mukhang ang parehong sa lahat ng platform
  • iphone / ipad compatible - gallery na ito ay na-optimize apple usap na aparato
  • css pinapatakbo balat - gallery css ay nahahati sa dalawang bahagi - functional at estethic kaya ito ay tunay madali na gumawa ng iyong sariling balat

    Mga ari-arian

    Video mula sa - http://www.bigbuckbunny.org/

    FAQ

    Gumagana multa 1st video ngunit, 2nd video ay hindi-load sa lahat
    Karamihan marahil ikaw ay pagsubok at may kalakip na ang parehong youtube video. Ikaw ay hindi maaaring magkaroon ng parehong mga video ng youtube sa 2 lugar.
    paano ko i-embed I vimeo link sa mga ito?
    idagdag lamang ang markup sa loob ng video gallery-con
     <Data-type div class = "vplayer-tobe" data-videoTitle = 'Vimeo video' = "vimeo" data-src = "31539657"> <div class = "menuDescription"> <img src = "http: // dummyimage.com / 50x50 / 000000 / fff & text = thumb "class =" imgblock "/> <div class =" the-title "> Ito ay isang Vimeo video </ div> Maaari autogenerate thumbnail Ang... </ div> </ div> 
    Baguhin ang halaga ng data-src may id ng iyong vimeo video
    Puwede na ito ay ginagamit para sa mga video na HINDI sa Vimeo o YouTube? Mayroon akong ilang mga video na naka-host sa isang server na gusto kong link nang direkta sa. Mangyaring ipaalam sa akin asap. thx
    Oo, partikular na ito ay ginawa para sa paglalaro sa sarili na naka-host ng mga video. YouTube at Vimeo ay isang bonus.
    Paano ako makakakuha ng mga icon ng social media sa trabaho?
    suriin ang mga setting shareCode para sa vGallery function na
    Paano ko mapapalitaw ang aking mga video ng maayos na naka-encode na gamitin sa loob ng gallery na ito?

    Kailangan mo ang iyong pelikula-convert sa 2 format upang matiyak gumaganap ang HTML5 na video sa lahat ng mga browser

    Pag Browser & inirerekomenda na programa encoding

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

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

    Structure Video DOM

     <Div class = "vplayer" data-description = "My Video" data-img = "img / 1.jpg"> <Controls video preload> <Pinagmulan src = "video / myvideo.m4v" /> <Pinagmulan src = "video / myvideo.ogg" /> <Uri ng object = data "application / x-Shockwave-flash" = "preview.swf" width = "550" height = "300" id = "flashcontent" style = "visibility: nakikita;"> <Name param = halaga "movie" = "preview.swf"> <param name value = "menu" = "false"> <param name value = "allowScriptAccess" = "palagi"> <Name value param = "scale" = "noscale"> <pangalan ng halaga param = "allowFullScreen" = "true"> <param name value = "wmode" = "opaque"> <Param name = value "flashvars" = "video = video / myvideo.m4v"> </ Object> </ Video> </ Div> 

    Handa ang aking video ko, paano ko idagdag ito whitin sa gallery?

    Pinakamahusay na paraan upang malaman na kung ikaw ay hindi pare-pareho sa html ay sa pamamagitan ng halimbawa. Open source / index.html at sa paligid ng 122 na linya makikita mo:

    [..]
    <Div class = "vplayer" data-description = "<img src = 'img / thumb.png' class = 'imgblock' /> Video 5" data-img = "img / 1.jpg">

    <Controls video preload>
    <Pinagmulan src = "video / test.mp4" type = 'video / mp4; codec = "avc1.42E01E, mp4a.40.2" '/>
    <Pinagmulan src = "video / test.webm" type = 'video / webm; codec = "VP8, vorbis" '/>
    <Pinagmulan src = "video / test.ogg" type = 'video / ogg; codec = "Theora, vorbis" '/>
    <Pinagmulan src = "video / bubbles.m4v" />

    <Object width = "500" height = "300">
    <Name param = "movie" value = "preview.swf? Video = video / advideo.flv"> </ param>
    <Name param value = "allowFullScreen" = "true"> </ param>
    <Name param value = "allowscriptaccess" = "palagi"> </ param>
    <Name param value = "wmode" = "opaque"> </ param>
    <Src = "preview.swf? Video = video / advideo.flv" type embed = "application / x-Shockwave-flash" width = "500" height = "300" allowscriptaccess = "palagi" allowfullscreen = "true" wmode = "opaque">
    </ Embed>
    </ Object>
    </ Video>
    </ Div>

    </ Div> <! End VIDEO GALLERY ->

    Ito ay kumakatawan sa mga huling video sa gallery, at ito ay isang magandang halimbawa ni clone na at pangalanan ito Video 6 sa halip ng Video 5 upang ipaalam

    [..]
    <Div class = "vplayer" data-description = "<img src = 'img / thumb.png' class = 'imgblock' /> Video 5" data-img = "img / 1.jpg">

    <Controls video preload>
    <Pinagmulan src = "video / test.mp4" type = 'video / mp4; codec = "avc1.42E01E, mp4a.40.2" '/>
    <Pinagmulan src = "video / test.webm" type = 'video / webm; codec = "VP8, vorbis" '/>
    <Pinagmulan src = "video / test.ogg" type = 'video / ogg; codec = "Theora, vorbis" '/>
    <Pinagmulan src = "video / bubbles.m4v" />

    <Object width = "500" height = "300">
    <Name param = "movie" value = "preview.swf? Video = video / advideo.flv"> </ param>
    <Name param value = "allowFullScreen" = "true"> </ param>
    <Name param value = "allowscriptaccess" = "palagi"> </ param>
    <Name param value = "wmode" = "opaque"> </ param>
    <Src = "preview.swf? Video = video / advideo.flv" type embed = "application / x-Shockwave-flash" width = "500" height = "300" allowscriptaccess = "palagi" allowfullscreen = "true" wmode = "opaque">
    </ Embed>
    </ Object>
    </ Video>
    </ Div>
    <Div class = "vplayer" data-description = "<img src = 'img / thumb.png' class = 'imgblock' /> Video 6" data-img = "img / 1.jpg">

    <Controls video preload>
    <Pinagmulan src = "video / test.mp4" type = 'video / mp4; codec = "avc1.42E01E, mp4a.40.2" '/>
    <Pinagmulan src = "video / test.webm" type = 'video / webm; codec = "VP8, vorbis" '/>
    <Pinagmulan src = "video / test.ogg" type = 'video / ogg; codec = "Theora, vorbis" '/>
    <Pinagmulan src = "video / bubbles.m4v" />

    <Object width = "500" height = "300">
    <Name param = "movie" value = "preview.swf? Video = video / advideo.flv"> </ param>
    <Name param value = "allowFullScreen" = "true"> </ param>
    <Name param value = "allowscriptaccess" = "palagi"> </ param>
    <Name param value = "wmode" = "opaque"> </ param>
    <Src = "preview.swf? Video = video / advideo.flv" type embed = "application / x-Shockwave-flash" width = "500" height = "300" allowscriptaccess = "palagi" allowfullscreen = "true" wmode = "opaque">
    </ Embed>
    </ Object>
    </ Video>
    </ Div>

    </ Div> <! End VIDEO GALLERY ->





    FIY, gallery na ito ay nilikha ng may-akda ng pinakamahusay na-nagbebenta, pinaka-tampok na stock gallery sa internet na natatanggap ng tapat na mga update (mas pagkatapos ay 10 ngayon)
    skin iPhone iPad COMPAL skinable minut FlashVars erabIed Local videos7 at moe! envato AftESS SUPPORT Forum FASTSI.FPORT

  • I-download
    Iba pang mga bahagi sa kategoryang itoAng lahat ng mga bahagi ng may-akdang ito
    Mga komentoMga madalas itanong at sagot

    Properties

    Nilikha:
    3 Set 10

    Huling Update:
    22 Set 14

    High Resolution:
    Oo

    Katugmang Browser:
    IE7, IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

    Files Kasama:
    JavaScript JS, HTML, CSS, SWF / FLV

    Bersyon Software:
    HTML5

    Keyword

    ecommerce, ang lahat ng mga bagay, paglalarawan, flash, flash fallback, flashvars, fullscren, gallery, graphics, HTML5, ie, mga imahe, info, localStorage, video, lakas ng tunog, xml