You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
3.2 KiB
74 lines
3.2 KiB
---
|
|
layout : 'default'
|
|
css : ''
|
|
element : 'video'
|
|
elementType : 'module'
|
|
|
|
title : 'Video'
|
|
description : 'A video is used to display moving visual images and related playback options'
|
|
type : 'UI Module'
|
|
|
|
status : 'Undocumented'
|
|
---
|
|
|
|
<script src="/javascript/video.js"></script>
|
|
|
|
<%- @partial('header', { tabs: { overview: 'Overview' } }) %>
|
|
|
|
<div class="main container">
|
|
|
|
|
|
<div class="ui active tab" data-tab="overview">
|
|
|
|
<h2 class="ui dividing header">Current Progress</h2>
|
|
<div class="ui indicating progress">
|
|
<div class="bar" style="width: 90%;">
|
|
<div class="progress">90%</div>
|
|
</div>
|
|
<div class="label">Needs Documentation</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Usage</h2>
|
|
<div class="no example">
|
|
<h4 class="ui header">Many Networks One API</h4>
|
|
<p>Semantic's video component provides a wrapper around APIs for two popular sites for hosting multimedia content, Youtube and Vimeo, allowing you to use a single embed and unified set of javascript parameters, to control javascript callbacks, HD and UI display settings, autoplay etc.</p>
|
|
<p>Semantics video allows you to display videos based on a network's content ID, and can grab a content ID from an existing url, so you dont have to use full URLs to youtube content if you're storing external resources in your database.</p>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">Responsive Embeds</h4>
|
|
<p>In additional Semantic's embeds use css based around <a href="http://embedresponsively.com/" target="_blank">Embed Responsively</a> to make your YouTube and Vimeo embed's maintain the correct aspect ratio as content resizes.</p>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">Unified API</h4>
|
|
<p>Ever try to learn Vimeo's froogaloop video API? How about Youtube's Javascript APIs? Semantic provides unified callbacks for <code>onPlay</code>, <code>onPause</code>, and other common API endpoints for tying an external video embed into your sites UI</p>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">Custom Image Placeholders</h4>
|
|
<p>Semantic's video component allows you the option to include a custom placeholder instead of loading the default placeholder from your media host.</p>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Example</h2>
|
|
<div class="no example">
|
|
<div class="code" data-type="javascript" data-demo="true">
|
|
$('.ui.video').video();
|
|
</div>
|
|
<div class="code" data-type="html" data-preview="true">
|
|
<div class="ui video"
|
|
data-source="youtube"
|
|
data-id="i_mKY2CQ9Kk"
|
|
data-image="/images/cat.jpg"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Development Progress</h2>
|
|
|
|
<div class="no example">
|
|
<p>This is an undocumented component, but is <b>mostly complete</b>.</p>
|
|
<p>You can help support the future development of the Semantic UI project, and help boost the priority of this component by donating to Semantic UI development.</p>
|
|
<p>Please be sure to leave a note in the comments to indicate that you are interested in the development of this particular component.</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|