Tampilkan postingan dengan label video player. Tampilkan semua postingan
Tampilkan postingan dengan label video player. Tampilkan semua postingan

Kamis, 05 Desember 2013

Elegant - YouTube & HTML5 Responsive Video Gallery (Media)

Show your YouTube videos or HTML5 videos with this elegant, responsive video player. Player comes with 5 pre-built skins. You can use player with only one video (no gallery), or you can create your own gallery with thumbnails, titles and descriptions. Number of videos is from one to unlimited. Player look is customisable via CSS, so you can easily customize colors and adjust it to your needs. Player is completly resizeable so it fits perfectly in every website design.

Features



  • easy setup

  • YouTube videos support

  • HTML5 videos support
  • responsive layout

  • optional gallery

  • 5 pre-built skins

  • custom width

  • custom height

  • touch/scroll (click/scroll) to control playlist

  • mobile-ready (iPhone, iPad, Android)

  • 100% vector icons, retina-ready (optimized for Macbook/iPhone/iPad)
  • all browsers compatible

  • multiple instances: you can insert more players in same page

  • optional logo: you can add your logo as image (.jpg, .png). Logo position can be in bottom-left corner, bottom-right ot top-right corner.

  • optional preview image: if you want your player to be paused when page loads, you can set preview image

  • autohide controls: you can choose after how much seconds player controls will disappear

  • hide / show gallery with playlist button (with this functionality you can “stretch” player over gallery to have better view for video, as well as “shrink” player to see gallery menu again to choose videos)

  • autoplay: on/off (choose to play video automatically when webpage loads or not)

  • complete volume control

  • optional share menu: facebook, twitter, youtube, pinterest, linkedin, google+, delicious, mail

  • optional embed code: for visitors to embed your player in their sites
  • information window with HTML formatted text (it means you can insert links, change fonts, text sizes with basic HTML formating)

  • fullscreen support (when not supported real fullscreen it switches to full browser support)

  • download package includes real fullscreen cross-browsers

  • double click to enter/exit fullscreen

  • rewind

  • tooltip time

  • tooltip volume

  • SPACE key play/pause

  • ESCAPE key to exit fullscreen

  • installation instructions included



Credits:


Thanks to Dorde Pivnicki

You may also like…






HTML5 Responsive Video Player & Advertising







3 in 1 – Video players pack Youtube / Vimeo / Flv / Mp3 / Image / Advertising










VIMEO / YOUTUBE / FLV VIDEO PLAYER WITH PLAYLIST



Flag Counter

HTML5 Player Module for Joomla (Multimedia)

HTML5 FLASH PLAYER module displays media player on your Joomla website. By using JW Player 6, it can play Video and Audio in many formats (mp4, mp3, flv, aac, m4a, f4a, YouTube…) and compatible with almost browsers and devices. The player automatically chooses either HTML5 or Flash to bring the best performance on browsers and devices.

GT Shortcodes (Interface Elements)

Follow Gautam Thapar on EnvatoFollow Gautam Thapar on Twitter




Even Better Than Before! – Version 1.3 – Updated on 7th November, 2013


GT Shortcodes is a premium WordPress plugin that boosts your WordPress site/theme with simple, clean, flat & awesome looking user interface elements in the form of simple shortcodes. Creating short codes is so easy with the help of short code editor dialog boxes or the so called shortcodes generator.



Talking about numbers, there are unlimited UI element possibilities if taking into consideration all the variations, styles, types, etc.



NEW! in Version 1.3




  • Animating / Shuffling Numbers

  • Responsive Banner Ads

  • Enhanced Progress Bars



ENHANCEMENTS! in Version 1.2.1




  • Full Control Over Accordion!

  • Font Awesome Icons Updated to Latest Version 4.

  • See change log below for full details



NEW! in Version 1.2




  • 60+ Animations

  • Lazy Load Images

  • QR Codes



NEW! in Version 1.1




  • 360+ Font Awesome Icons

  • Awesome Pricing Tables

  • Super Columns



Silent Features




  • Supports WordPress 3.3+

  • Based on Twitter Bootstrap

  • Supports Bootstrap 2.3.2 & 3

  • Simple,Clean,Flat Designed Elements

  • Responsive Elements

  • Elements Adapt To Bootstrap Theme Style

  • Light Weight Plugin

  • No Load On Database

  • Automatically Clears It’s Data From Database On De-activaton

  • Shortcode Dialog Boxes / Shortcode Generator To Easily Print Shortcodes

  • Works With Bootstrap Based Themes & Even With Non-Bootstrap Based Themes

  • Control Over CSS & JS Files. Enable or Disable As Required

  • Shortcodes Works in Posts, Pages and Widgets.

  • You can also add shortcodes in php template files by placing the shortcode inside do_shortcode function, like shown below -

    <?php echo do_shortcode('[gtglyph]'); ?>


  • Documentation

  • Vast Browser Support

  • Awesome Support



Shortcodes




  • Animating / Shuffling Numbers [NEW]: Animated numbers or shuffling numbers are much in fashion these days. They are good for grabbing attention of users to show off vital stats. DEMO

  • Responsive Banner Ads [NEW]: Banner ads come with all the standard web banner sizes but you can also define custom sizes. If no image source is defined then a placeholder image is displayed. Short codes work in widgets too! DEMO

  • Animations: 60+ Animations! An animation is an effect that lets an element gradually change from one style to another. You have the option to rotate, fade, flip, bounce, slide and more. There are four ways to trigger an animation such as on page load, on page scroll, on click and on hover. Not only this, for every animation you can set the duration, iteration, direction, timing, mode and delay options. DEMO

  • Lazy Load Images: Save your website bandwidth + Load your pages faster using Lazy Load Images! Optimize browser rendering and reduce number of HTTP round-trips by deferring the loading of images which are not in the viewport. Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load. DEMO

  • QR Codes: 6 Type of QR Codes with the option to set different image sizes! A QR code consists of black modules (square dots) arranged in a square grid on a white background, which can be read by an imaging device (such as a camera) and processed using Reed–Solomon error correction until the image can be appropriately interpreted; data is then extracted from patterns present in both horizontal and vertical components of the image. DEMO

  • Accordions [Enhanced]: Accordions are used to display content in collapsible content panels. Style the accordions your own way by choosing among unlimited colors, 14 toggle icon types & 10 border styles. Change the head background color, head text color, border size-color-style-radius & content background and text color. The accordions are responsive thereby they fit well on every screen. DEMO

  • Alerts: Alerts are used to provide important information to users. Adds an alert box to the page. DEMO

  • Buttons: A button is a user interface element which once clicked triggers an event. Adds a clickable button to the page. DEMO

  • Carousel: Carousel is an image rotator. It is also known as slider. Adds a carousel to the page. DEMO

  • Columns: Column layout enables content to be flowed into multiple columns, which retain a gap and an optional rule between them. It also makes it possible to vary the number of columns based on the size of the browser window. Adds a column to the page. DEMO

  • Font Awesome Icons: Font Awesome gives you scalable vector icons that can instantly be customized. Adds a font awesome icon to the page. DEMO

  • Glyphicons: Glyphicons are precisely prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation. Adds a glyphicon to the page.

  • Labels: Labels are used to identify or designate, describe or classify something. Adds a label to the page. DEMO

  • Popovers: A popover is an overlay which covers the material in a web browser without the need to create a new window. Adds a popover to the page. DEMO

  • Pricing Tables: Pricing tables play an important role for every company that offers products or services. They clearly differentiate between features and prices of different products and services. Adds a pricing table to the page. DEMO

  • Progress Bars [Enhanced]: A progress bar is a component in a graphical user interface used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. Adds a progress bar to the page. DEMO

  • Switches: Switches are used toggle between two possibilities such as on or off. Adds a switch to the page. DEMO

  • Tabs: Tabs are used to organize content. Adds a tab to the page. DEMO

  • Tables: Tables are useful for presenting data in an organized manner. Tables are very useful for data comparisons, etc. Adds a table to the page. DEMO

  • Tooltips: A tooltip is a small, boxed text message that pops up when a mouse cursor hovers over an element. Adds a tooltip to the page. DEMO

  • Video Player: Video player is useful for playing videos and movies. Adds a video player to the page. DEMO

  • and more soon..



Quick Demo Videos



Plugin installation and shortcodes usage videos.





Benefits in Bootstrap 3 Version of GT Shortcodes




  • Labels inherit size from parent element.

  • Responsive Tables.



Plugin Support



I will do my 200% to solve problems, if any. I will do my best to respond within 24 hours, generally quickly.



If you are looking for some particular UI element which is not included in this plugin then you can let me know about it using the contact form from here or through the comment section. If possible I will include that element in this plugin.



Let us together make this plugin BETTER!



Changelog





::::::::::::::::::::::::::::::::::::::::::::::::::::::::

+++ CHANGELOGS +++

::::::::::::::::::::::::::::::::::::::::::::::::::::::::

v1.3.1 [10th November 2013] --

Bug Fixes
1. Fixed version issue.
2. Fixed blank screen issue when selecting 'delete data on plugin deletion'.

........................................................

v1.3 [7th November 2013] --------

Additions
1. Added Animated / Shuffling Numbers.
2. Added Responsive Banner Ads.

Improvements
3. Enhanced Progress Bars.
4. Now Accordions Support All Kind of Content like images, other short codes, links, etc.
5. Now Tabs Support All Kind of Content like images, other short codes, links, etc.
6. Now Tables Support All Kind of Content like images, other short codes, links, etc.

Others
7. Fixed a little bug with ‘on hover animations’ in bootstrap 3 version.
8. Other minor improvements and fixes.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::

v1.2.1 Bug Fix [30th October 2013] ---

1. Fixed a bug in button short code where multiple quotes were getting added to the href attribute.
2. Added an option to choose button link target.
3. Added settings link page under plugin name on plugins page.

........................................................

v1.2.1 [28th October 2013] -----------

1. Added settings link directly under plugin name on plugins list page.

Major Accordion Enhancement - Now Get Full Control Over Accordion.
2. Added 14 Toggle Icons for Accordion.
3. Comma Separator is Now Replaced with a Pipe (vertical bar) Character.
4. Added Option to Choose Default Open Tab.
5. Added Control Over Accordion Border Size, Border Style, Border Radius & Border Color.
6. Added Option to Change Accordion Content Background.
7. Added Option to Change Accordion Content Text Color.

Button Enhancement
8. Added Option to Select Button HTML Tag. It makes it easy to use button within other 3rd party short codes. For example, you can use button within Ninja Popups short code to make popup appear on button click.

Font Awesome Icons Enhancement
9. Updated Font Awesome to Version 4.
10. Font Awesome 4 does not support IE7 so removed that option from options panel.
11. Added option to select minified version of font awesome stylesheet.

........................................................

v1.2 [23rd October 2013] -----------

Additions
1. Added Animations.
2. Added QR Codes.
3. Added Lazy Load Images.

Improvements
4. Options Page Visual Improvements.
5. Now user has the choice/control over data deletion from database, on plugin deactivation or on plugin deletion.
6. Added more control over scripts and styles.
7. Fixed Pricing Table padding issue.
8. Fixed Pricing Table responsiveness for 5 columns.

For Bootstrap version 3:
10. Added left and right tabs in bootstrap 3 version.

For Bootstrap version 2.3.2
11. Removed alignment option from tabs short code. Now only one option to select default, left or right tab style. Tabs short code need to be updated!

::::::::::::::::::::::::::::::::::::::::::::::::::::::::

v1.1 [9th October, 2013] -----

1. Added 360+ Font Awesome Icons.
2. Added Pricing Tables.
3. Added Columns.
4. Improved Buttons Shortcode. Now in place of [gtbutton] uses [gtbutton][/gtbutton] shortcode. Button text and icons can be added between shortcode tag.
5. Other Code Improvements.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::

v1 [3rd October, 2013] -

1. Initial Release

Rabu, 04 Desember 2013

Simple Instagram VIDEO (Social Networks)

Simple Instagram Video


Introducing Video on Instagram! This plugin leverages the newly added video stream as all of the features if the current API. Share your favorite videos and photos pulled directly from the Instagram API. Its simple, easy, and highly customizable. Start sharing now!



Overview



Simple Instagram Video is a premium Instagram plugin that uses the power of HTML5 Video to showcase the latest functionality of the Instagram API. We know you will love it as much as we do because we’ve designed it to be as beautiful as it is useful. Give it a try, have some fun, and share you moments with the world!



Key Features




  • Superior Codebase -
    Built on our amazingly bulletproof framework


  • Responsive Design -
    Fully mobile-ready design adapts to any device.


  • Fullscreen Video -
    Enjoy your videos fully regardless of the device.


  • Advanced Video Thumbnail Gallery Mode -
    Share your best Instagram videos with our clean thumbnail gallery.


  • Premium Video Playlist Gallery Mode -
    Display your videos with our unique playlist style video player.


  • Popular Instagram Feed Mode -
    This feed mode pulls in the photos from the Instagram popular feed.


  • Tag Instagram Feed Mode -
    This feed mode allows you to specify a tag to search from the Instagram API.


  • User Instagram Feed Mode -
    This feed mode allows you to specify a user id to pull in photos from a specific user.


  • Multiuser Instagram Feed Mode -
    This feed mode allows you to specify multiple user id’s to pull in photos from specific users.
    Note, this feature does NOT allow load more functionality.


  • Liked Instagram Feed Mode -
    Display photos and videos that you’ve liked all accross the Instagram API.



Changelog


Version 1.1 – June 29 2013

  • jQuery 1.9.0 compatibility and Instagram API Updates.

  • Bug fixes.


Version 1.2 – July 3 2013

  • New Feature! Now added 7 new skins for video player!

  • Added the ability to make custom skins.


ZoomBox 2 - The Photographer's Premium Lightbox (Images and Media)

ZoomBox Lightbox Intro – top


ZoomBox 2 – The Photographer’s Lightbox ! What makes ZoomBox unique to the other lightbox scripts ? In short – quality, user-friendliness, design and social media connectivity. Take a look at the demos and be convinced.


ZoomBox Lightbox Features



  • HTML5 technology - this gallery uses the latest html5 tehniques ( like Histroy API ) to deliver a never seen before experience to your clients

  • fully responsive – looks great from mobile to HD

  • touch optimized – touch devices are not forgotten

  • two skins – two full skins to fit every brand

  • CSS3 technology - this player uses cutting-edge css3 definitions
  • Retina-ready - graphics have double resolution for smooth retina viewing
  • easy install – purchase, download the zip, read the docs

  • iPhone / iPad optimized – this gallery has been optimized for Apple touch devices
  • Android optimized – this component has been tested on Android 4.0 and works awesome
  • developer / SASS powered – this component’s CSS has been built on top of SASS which means SASS users will have an easy time modifying the skins. For non-SASS users it’s no problem either because CSS files ( generated by SASS ) are provided

  • 100% css skinable – want to make slight modifications to the skins ? The skins are 100% built from the css and it is very easy to edit with css knowledge
  • SEO friendly – built with search engine optimization on mind from the ground up, the Testimonial Rotator uses non hidden valid html markup to build the widget
  • compatible with all major browsers, including IE – compatible from IE7 to IE10, Chrome, Safari and Firefox
  • the only lightbox script that does deeplinking right – most lightbox scripts use hashes for delivering the deeplink, but the problem with that is that facebook likes for example will not get counted for the photo the user is viewing in the ZoomBox, but for the entire page instead. With ZoomBox, each item will have it’s own comments and likes. This is awesome if you want to have a contest for example and the photo with the highest likes wins. Deeplinking can be disabled offcourse.
  • unique ability to zoom on photos – this is the perfect lightbox script for photographers to showcase their work because on any image, your visitor can zoom it and see the marvelous details you capture in your art. Just click any photo once the ZoomBox is open to test.
  • truly social – Zoombox 2 is truly social. It features the Facebook Like widget and Facebook Chat so your fans can comment on your art. And because deeplinking is done right in ZoomBox 2, each photo has it’s own likes and comments, even if on the same page. Wow!


ZoomBox Lightbox Updates


UPDATE 1.20 [ 11/25/2013 ]

  • [FIX] some bugs

UPDATE 1.10 [ 06/14/2013 ]

  • [add] arrows for gallery mode
  • [add] possibility to add own social icons
  • [optimize] touch devices view
  • [add] big image control from touch devices

FAQ



I tested the pluging ,but how can i show Facebook Like button and Facebook Chat as the demo.

You need to run it from a http:// protocol ( not a file:// one )

Ie. putting it on a live website would make it work. ( or locally with WAMP )





when I click on a thumb
and a larger image is shown,
there is a button that opens
the “Social network functions”

but this window is only opened when I go OVER the
button.. when I go off it, it
disappears…


Yes, this is how it works.


I understand that your
script has an audio player,
does it play .MP3 files that
are stored on my server?


Yes. It will play self hosted mp3s and soundclound audio files.




Was wondering how can I disable the zoom in feature. Where in the coding can I add my own social media?

First of all use zoombox.dev.js for development.

Now, you can comment this line ( 1076 ) _theItem.bind(‘click’, click_imageitem);




Then for extra social you just have the social_extraShareIcons option




ie.

$(".zoombox").zoomBox({'social_extraShareIcons' : '<a href="link"><img class="" src="socialiconsrc.jpg" /></a>'});



your script works on all
devices including iPhones and
iPads, tablets and smartphones, right?


Yes, it’s optimized for any device




Used by








Credits


social icons – http://wegraphics.net/downloads/icons-downloads/free-stained-and-faded-social-media-icons-vol-2/