title: Roundtrip tagline: present videos date: 2020-11-04 00:00:00 +100 description: >
Playing video on web pages seems not that special since you can already watch videos on web pages through plugins like Flash Player, Quicktime or Silverlight. A new standard goes to HTML5 Video, a pure HTML way to show video on the web; instead of the previous de facto standard of using proprietary software.
categories: [ Roundtrip ] tags: [ Introduction, Module, Video ]
permalink: /pages/public/learn/roundtrip/present_videos/ regenerate: false
personalization: true
fam_menu_id: page_ctrl_simple
resources: [
lightGallery, justifiedGallery, video_js, vimeo_player, vimeo_froogaloop ]
resource_options:
- attic: padding_top: 400 padding_bottom: 50 background_color: color_1: md_grey_100 color_2: md_grey_400 slides: # Broadway Underground - still image (animate default) - url: /assets/videos/headers/still/underground-broadway.jpg alt: Broadway Underground alignY: top animateFirst: false # Broadway Underground - FAYETTE ST, moved file to Github/LFS - url: https://github.com/jekyll-one-org/jekyll-one-lfs/raw/master/videos/underground-broadway.mp4 alignY: 0 isVideo: true loop: false duration: 12000 # Broadway Underground - still image (animate random) - url: /assets/videos/headers/still/underground-broadway.jpg alt: Broadway Underground alignY: top transition: push_left|push_right|cover_up|cover_down|fade|fadeInOut
// Page Initializer // ============================================================================= // Enable the Liquid Preprocessor :page-liquid:
// Set (local) page attributes here // —————————————————————————– // :page–attr: <attr-value> :images-dir: {imagesdir}/pages/roundtrip/100_present_images
// Load Liquid procedures // —————————————————————————– {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
// Load page attributes // —————————————————————————– {% include {{load_attributes}} scope=“all” %}
// Page content // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Playing video on web pages seems not that special since you can already watch videos on web pages through plugins like _Flash Player_, Quicktime, or Silverlight. A new standard goes to HTML5 Video, a pure HTML way to show video on the web, instead of the previous de facto standard of using proprietary software.
Video Galleries¶ ↑
HTML5 Video opens the doors to your way of presenting video content. Modern browsers support the video tag `<video>` for the HTML5 video standard. Browsers have a built-in multimedia framework already for decoding and displaying video content. No need to use such proprietary software components anymore!
HTML5 Video support is given by the App gallery combined with the Lightbox LightGallery.
Two types of video sources are supported:
. videos from local files (your webspace) . videos from online sources (on the Internet) like YouTube, Vimeo, etc.
The combination of the App gallery and the lightbox LightGallery is entirely usable for all the video content you want to present on your site. Galleries can be placed elsewhere with your content. You can use them for video blogs by putting them into your blog article's content.
WARNING: LightGallery can be used for free for private use, but a commercial license is needed for business use. See {light-gallery-license}[Light Gallery license] how to use LightGallery for commercial websites and projects.
Local video content¶ ↑
Digital image content, simple pictures or videos, are easy to make. Today, each and every mobile has a camera - not that bad! Presenting a bunch of (digital) pictures is very easy by using Justified Gallery, for example. Videos created by a digicam or a mobile can be played by J1
Template using the HTML5 Video support of LightGallery.
Two players are available with LightGallery:
. an internal player used by default . videojs.com/[video.js], a excellent Javascript video library
NOTE: The HTML5 specification does not define which video and audio formats browsers should support. J1
LightGallery can play all types of standard HTML5 Video formats on modern browsers today (MP4, WebM, and Ogg).
Online video content¶ ↑
The Internet is full of inspiring content. Video content is popular, the number of channels on YouTube is enormous. If you want to present video content from the Internet, e.g., your channel, the online video support of J1
Template may be the right choice. Find some enjoyable videos from James Cordon's channel: Carpool Karaoke.
.YouTube Video Gallery - Carpool Karaoke gallery::jg_video_online_youtube
.Vimeo Video Gallery - Fashion gallery::jg_video_online_vimeo
Whats next¶ ↑
Images and videos are pretty visual. And it can be impressive, for sure. But the most visual component is the text for all pages, for all sites on the Internet. To see how text could be presented great for modern responsive websites, check the section Typography next.
What? Find out how it works. go for: {roundtrip-typography}[Typography].