HTML5 Videos

[TS-VCSC-Icon-Title title=”HTML5 Video Player Features” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”RmVhdHVyZXM=” el_file1=”” el_file2=””]

The “TS Video HTML5” element allows you to easily insert a self-hosted HTML5 video file into your site. The element (player) comes with multiple skins and provides you with a lot of unique features that allow you to get the most out of your videos.

[TS_VCSC_Fancy_List list_type=”image” marker_image=”http://tekanewascripts.com/composium/wp-content/plugins/ts-visual-composer-extend/images/bullets/bullet_arrow_blue.png” el_file=””]

  • Video is embedded via iFrame to avoid JS/CSS conflicts with other players or plugins
  • Handles MP4, OGG and WEBM video files for a variety of browsers
  • 3 different player skins to select from
  • Flash fallback for older browsers (it requires at least an MP4 version of the video)
  • Mobile browsers will either revert to their native players or if skinning is possible, only provide their native controls
  • Use videos uploaded to WordPress or from remote servers
  • Autoplay feature to automatically start video upon page load (desktop only)
  • Autostop feature of currently playing video when another video is started
  • Disable fullscreen option if undesired
  • Show video in lightbox with multiple trigger options
  • Add logo overlay to your video (desktop only) or to control bar (standard for mobile) with optional link
  • Video is fully responsive
  • Optional social share buttons (Twitter, Facebook, Google+, StumbleUpon)
  • Show video fixed on screen (top left / top right / bottom left / bottom right) with optional offsets to account for fixed menu bars
  • Player is handled by Projekktor.js (and is therefore limited to any restrictions this script has as well)

[/TS_VCSC_Fancy_List]

[TS-VCSC-Spacer height=”20″]

Skin 1

[TS-VCSC-Divider divider_border_thick=”2″]
Direct Embed
[TS-VCSC-Divider margin_top=”0″][TS_VCSC_HTML5_Video video_mp4_source=”false” video_mp4_remote=”http://www.tekanewascripts.com/videos/Sintel_Trailer.mp4″ video_webm_source=”false” video_webm_remote=”http://www.tekanewascripts.com/videos/Sintel_Trailer.webm” video_ogg_source=”false” video_ogg_remote=”http://www.tekanewascripts.com/videos/Sintel_Trailer.ogg” video_poster=”16727″ video_title=”Sintel – The Movie” video_logo_show=”logocontrol” video_logo_image=”16011″ video_skin=”light” video_preload=”false” video_logo_width=”50″ flash_firefox=”false” flash_explorer=”true” video_default=”false”]
Shown in Lightbox
[TS-VCSC-Divider margin_top=”0″][TS_VCSC_HTML5_Video video_mp4_source=”false” video_mp4_remote=”http://www.tekanewascripts.com/videos/Sintel_Trailer.mp4″ video_webm_source=”false” video_webm_remote=”http://www.tekanewascripts.com/videos/Sintel_Trailer.webm” video_ogg_source=”false” video_ogg_remote=”http://www.tekanewascripts.com/videos/Sintel_Trailer.ogg” video_poster=”16727″ video_posterfit=”fill” video_title=”Sintel – The Movie” video_logo_show=”logocontrol” video_logo_image=”16011″ frame_border_type=”solid” content_lightbox=”true” content_trigger=”flat” content_buttonstyle=”ts-dual-buttons-color-wet-asphalt-flat” content_buttonhover=”ts-dual-buttons-preview-midnight-blue-flat ts-dual-buttons-hover-midnight-blue-flat” video_skin=”light” video_preload=”false” video_logo_width=”50″ flash_firefox=”false” flash_explorer=”true” video_default=”false”]
[TS-VCSC-Spacer height=”20″]

Skin 2

[TS-VCSC-Divider divider_border_thick=”2″]
Direct Embed
[TS-VCSC-Divider margin_top=”0″][TS_VCSC_HTML5_Video video_mp4_source=”false” video_mp4_remote=”http://www.tekanewascripts.com/videos/Oceans_Clip.mp4″ video_webm_source=”false” video_webm_remote=”http://www.tekanewascripts.com/videos/Oceans_Clip.webm” video_ogg_source=”false” video_ogg_remote=”http://www.tekanewascripts.com/videos/Oceans_Clip.ogv” video_theme=”totallylookslike” video_poster=”16740″ video_posterfit=”fill” video_title=”Oceans – The Movie” video_logo_show=”logocontrol” video_logo_image=”16011″ frame_border_type=”solid” video_skin=”light” video_preload=”false” video_logo_width=”50″ flash_firefox=”false” flash_explorer=”true” video_default=”false”]
Shown in Lightbox
[TS-VCSC-Divider margin_top=”0″][TS_VCSC_HTML5_Video video_mp4_source=”false” video_mp4_remote=”http://www.tekanewascripts.com/videos/Oceans_Clip.mp4″ video_webm_source=”false” video_webm_remote=”http://www.tekanewascripts.com/videos/Oceans_Clip.webm” video_ogg_source=”false” video_ogg_remote=”http://www.tekanewascripts.com/videos/Oceans_Clip.ogv” video_theme=”totallylookslike” video_poster=”16740″ video_posterfit=”fill” video_title=”Oceans – The Movie” video_logo_show=”logocontrol” video_logo_image=”16011″ frame_border_type=”solid” content_lightbox=”true” content_trigger=”flat” content_buttonstyle=”ts-dual-buttons-color-peter-river-flat” content_buttonhover=”ts-dual-buttons-preview-belize-hole-flat ts-dual-buttons-hover-belize-hole-flat” video_skin=”light” video_preload=”false” video_logo_width=”50″ flash_firefox=”false” flash_explorer=”true” video_default=”false”]
[TS-VCSC-Spacer height=”20″]

Skin 3

[TS-VCSC-Divider divider_border_thick=”2″]
Direct Embed
[TS-VCSC-Divider margin_top=”0″][TS_VCSC_HTML5_Video video_mp4_source=”false” video_mp4_remote=”http://www.tekanewascripts.com/videos/Big_Buck_Bunny_Trailer.mp4″ video_webm_source=”false” video_webm_remote=”http://www.tekanewascripts.com/videos/Big_Buck_Bunny_Trailer.webm” video_ogg_source=”false” video_ogg_remote=”http://www.tekanewascripts.com/videos/Big_Buck_Bunny_Trailer.ogg” video_theme=”minimum” video_poster=”16729″ video_posterfit=”fill” video_title=”Big Buck Bunny Movie” video_logo_show=”logocontrol” video_logo_image=”16011″ frame_border_type=”solid” video_skin=”light” video_preload=”false” video_logo_width=”50″ flash_firefox=”false” flash_explorer=”true” video_default=”false”]
Shown in Lightbox
[TS-VCSC-Divider margin_top=”0″][TS_VCSC_HTML5_Video video_mp4_source=”false” video_mp4_remote=”http://www.tekanewascripts.com/videos/Big_Buck_Bunny_Trailer.mp4″ video_webm_source=”false” video_webm_remote=”http://www.tekanewascripts.com/videos/Big_Buck_Bunny_Trailer.webm” video_ogg_source=”false” video_ogg_remote=”http://www.tekanewascripts.com/videos/Big_Buck_Bunny_Trailer.ogg” video_theme=”minimum” video_poster=”16729″ video_posterfit=”fill” video_title=”Big Buck Bunny Movie” video_logo_show=”logocontrol” video_logo_image=”16011″ frame_border_type=”solid” content_lightbox=”true” content_trigger=”flat” content_buttonstyle=”ts-dual-buttons-color-alizarin-flat” content_buttonhover=”ts-dual-buttons-preview-pomegranate-flat ts-dual-buttons-hover-pomegranate-flat” video_skin=”light” video_preload=”false” video_logo_width=”50″ flash_firefox=”false” flash_explorer=”true” video_default=”false”]