You can attach files to every article. Those can be any kind of document like pdf, doc or media files like mov, ogg, mp4 and other file formats. Sometimes you want to attach a video or audio file and create a player to show your media to users online. You can use any audio or video player for your template.
This example uses video.js player plugin. You can learn more about setup on project page www.videojs.com
<!-- we are checking if article has any attached files -->
{{ if $gimme->article->has_attachments }}
<!-- if it has we list it -->
{{ list_article_attachments }}
<!-- now we want to check file extension to create players -->
{{ if ($gimme->attachment->extension == mp3) || ($gimme->attachment->extension == oga) }}
<audio controls>
<source src="{{ url options="articleattachment" }}" type="{{ $gimme->attachment->mime_type }}">
</audio>
{{ elseif $gimme->attachment->extension == ogv ||
$gimme->attachment->extension == ogg ||
$gimme->attachment->extension == mp4 ||
$gimme->attachment->extension == webm }}
<video id="video_{{ $gimme->current_list->index }}"
class="video-js vjs-default-skin" controls preload="auto" width="100%" data-setup="{}">
<source src="{{ url options="articleattachment" }}" type='{{ $gimme->attachment->mime_type }}' />
</video>
{{ else }}
<!-- if it is not audio or video file we will show simple download link -->
<a href="{{ url options="articleattachment" }}" >
{{ $gimme->attachment->file_name }} ({{ $gimme->attachment->size_kb }}kb)
</a>
{{ /if }}
{{ /list_article_attachments }}
{{ /if }}
Using the well documented and easily understood Video for Everybody approach (http://camendesign.co.uk/code/video_for_everybody) it's very easy to roll your own video delivery solution for your publication. This could be integrated into the above code if you preferred not to have to relay on video.js for content delivery.
[...]
{{ elseif $gimme->attachment->extension == ogv ||
$gimme->attachment->extension == ogg ||
$gimme->attachment->extension == mp4 ||
$gimme->attachment->extension == webm }}
<!-- first try HTML5 playback: if serving as XML, expand 'controls' to 'controls="controls"'' and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video controls>
<!-- MP4 must be first for iPad! -->
{{ if $gimme->attachment->extension == mp4 }}<source src="{{ uri options='articleattachment' }}" type="video/mp4" /><!-- Safari / iOS video -->{{ /if }}
{{ if $gimme->attachment->extension == ogg }}<source src="{{ uri options='articleattachment' }}" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->{{ /if }}
{{ if $gimme->attachment->extension == ogv }}<source src="{{ uri options='articleattachment' }}" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->{{ /if }}
{{ if $gimme->attachment->extension == webm }}<source src="{{ uri options='articleattachment' }}" type="video/webm" /><!-- MS presumably -->{{ /if }}
</video>
{{ elseif $gimme->attachment->extension == flv }}
<!-- fallback to Flash: -->
<object type="application/x-shockwave-flash" data="{{ uri options='articleattachment' }}">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="{{ uri options='articleattachment' }}" />
<param name="flashvars" value="controlbar=over&file={{ uri options='articleattachment' }}" />
</object>
<!-- you *should* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p>
<strong>Download Video:</strong>
{{ if $gimme->attachment->extension == mp4 }} Closed Format: <a href="{{ uri options='articleattachment' }}">"MP4"</a>{{ /if }}
{{ if $gimme->attachment->extension == ogv }} Open Format: <a href="{{ uri options='articleattachment' }}">"OGG"</a>{{ /if }}
</p>
There has been error in communication with Booktype server. Not sure right now where is the problem.
You should refresh this page.