20script.ir

Using videos
20script

Local videos:

Path to video is set in settings:

video:[
    {
        type:'local',
        path:{
            Default: '../media/video/1/main/01.mp4' /* default required! */
        },
	previewImage:'../media/video/1/main/01.jpg'
    }
],

Rules:

1. You need to have every video encoded in both mp4 and ogv video format (or webm instead of ogv is webm is used in settings):

/*useWebmVideoFormat: true/false (Browser support for html5 video requires minimum of 2 video formats to cover all browsers, mp4 and ogv being preffered. If useWebmVideoFormat is true, then webm will be used instead of a ogv.) */
useWebmVideoFormat:false,

2. You also need preview image for autoplay off.
(even if you set autoplay on, for some mobiles (like mobile IOS) autoplay is disabled by default)
User Control of Downloads Over Cellular Networks

Video encoding

I recomend using Handbrake (open-source) for generating the mp4 file for your video files.

http://diveintohtml5.info/video.html#handbrake-gui

For the ogv or webm conversion, you can use a free online service called Video-online-convert:

http://video.online-convert.com/convert-to-ogg
http://video.online-convert.com/convert-to-webm

You just have to upload your mp4 and it will process it and offer a ogv/webm download.

mime types

If you have trouble playing html5 videos on your server in some browsers, and you get an errors in console similar to these:

Specified "type" of "video/mp4" is not supported. Load of media resource ... failed.
Specified "type" of "video/ogv" is not supported. Load of media resource ... failed.

This is a mime type problem.

You need to add these lines in your .htaccess file on your server:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Youtube videos:

Youtube supports single video ID.

Path to video is set in settings:

video:[
    {
        type:'youtube',
	path:'F08U2yCxbYg'
    }
],

Quality

Video quality is automatically grabbed for youtube, and for local videos you can set any number of qualities you want.

Quality paths for local video are set in setttings:

path:{
    High: '../media/video/1/main/01-high.mp4', 
    Default: '../media/video/1/main/01.mp4', /* default required! */
    Low: '../media/video/1/main/01-low.mp4'
},

(High, Default, Low are titles for the menu items)

Rules:

For every mp4 video path you set, you need to have the same videos with ogv extension (or webm, whatever is used) located in the same folder with the same name!

So for the above example, the script will assume that you have the following videos in the same folder:

'../media/video/1/main/01-high.ogv'
'../media/video/1/main/01.ogv'
'../media/video/1/main/01-low.ogv'

Captions

Rules:

Caption times are rounded to full second (so caption can either start at 0 or 1 second, not in-between).

Caption paths are set in settings:

captions:'data/captions/captions_adv.xml',/* subtitles */

Captions are loaded through xml files in following format and appended in the player:

<div class="sub_group" data-title="English" data-default>
    <div class="ap_sub" data-show="2" data-hide="8">This is a subtitle for <span class="red">lorem ipsum</span> project.</div>
</div>

Each sub_group is one subtitle language.

data-default is optional attribute for making specific subtitles active on start.

Each ap_sub is one subtitle line.

data-show and data-hide are full second times.

Timed elements

You can place timed elements above the video during video playback.

Rules:

Event times are rounded to full second (so event can either start at 0 or 1 second, not in-between).

Event path is set in settings:

events: 'data/events/events.xml'/* timed events over video */

Events are loaded through xml files in following format and appended in the player:

<div class="ap_elem" data-show="0" data-hide="5">
    ... optional content inside ...
</div>

This is the required part, what you place inside is up to you.

data-show and data-hide are full second times.

If data-show is empty like so:

<div class="ap_elem" data-show data-hide="5">
    ... optional content inside ...
</div>

Element will be shown on start.

if data-hide is empty like so:

<div class="ap_elem" data-show="0" data-hide>
    ... optional content inside ...
</div>

Element will be shown until the end.

Code in jquery.tvp.js which handles events:

function trackTimedElements(ct){
    ...
}

Download

You can specify one download path for each video in settings:

downloadPath:'../media/video/1/main/01.mp4',

If download path is set for specific video, download icon will appear in the menu once video starts.

Note:

On mobile, download will be redirected to email because some mobiles dont allow file download like Apple IOS.

Social sharing

Social sharing

Available social sites are listed in settings:

sharingSites:  {/* (comment out/delete not used)  */
    facebook:{
        iconUrl:'data/social/facebook.png',
        tooltipText:'Share on Facebook',
        fs_app_id:''/* facebook application id (needed if you use facebook share, https://developers.facebook.com/apps) */
    },
    twitter:{
        iconUrl:'data/social/twitter.png',
        tooltipText:'Share on Twitter'
    },
    google:{
        iconUrl:'data/social/google.png',
        tooltipText:'Share on Google'
    },
    pinterest:{
        iconUrl:'data/social/pinterest.png',
        tooltipText:'Share on Pinterest'
    },
    linkedin:{
        iconUrl:'data/social/linkedin.png',
        tooltipText:'Share on Linkedin'
    },
    digg:{
        iconUrl:'data/social/digg.png',
        tooltipText:'Share on Digg'
    },
    reddit:{
        iconUrl:'data/social/reddit.png',
        tooltipText:'Share on Reddit'
    },
    tumblr:{
        iconUrl:'data/social/tumblr.png',
        tooltipText:'Share on Tumblr'
    },
    stumbleupon:{
        iconUrl:'data/social/stumbleupon.png',
        tooltipText:'Share on Stumbleupon'
    },
    delicious:{
        iconUrl:'data/social/delicious.png',
        tooltipText:'Share on Delicious'
    }
},

To use facebook, you will need facebook application id which you create here: https://developers.facebook.com/apps

How do I get a Facebook Application ID?

You enter facebook application id in settings:

/*fs_app_id: facebook application id (if you use facebook share, https://developers.facebook.com/apps) */
fs_app_id:'',

Callbacks

Callbacks are located in jquery.tvp.js file:

/* CALLBACKS */
function tvpSetupDone(instance, media_id){
	/* called when component is ready to use public API. Returns player instance, media_id. */
	//console.log('tvpSetupDone: ', media_id);
}
function tvpVideoLoaded(instance, media_id){
	/* called when video data is loaded. Returns player instance, media_id. */
	//console.log('tvpVideoLoaded: ', media_id);
}
function tvpVideoStart(instance, media_id){
	/* called when current playing video starts. Returns player instance, media_id. */
	//console.log('tvpVideoStart: ', counter);
}
function tvpVideoPlay(instance, media_id){
	/* called when media is played. Returns player instance, media_id. */
	//console.log('tvpVideoPlay: ', counter);
}
function tvpVideoPause(instance, media_id){
	/* called when media is played. Returns player instance, media_id. */
	//console.log('tvpVideoPause: ', counter);
}
function tvpVideoFinish(instance, media_id){
	/* called on video finish. Returns player instance, media_id. */
	//console.log('tvpVideoFinish: ', media_id);
}
function tvpFsEnter(instance, media_id){
	/* called on fullscreen enter. Returns player instance, media_id. */
	//console.log('tvpFsEnter: ', media_id);
}
function tvpFsExit(instance, media_id){
	/* called on fullscreen exit. Returns player instance, media_id. */
	//console.log('tvpFsExit: ', media_id);
}
function tvpCaptionChange(instance, media_id, lang){
	/* called on caption change. Returns player instance, media_id, caption language. */
	//console.log('tvpCaptionChange: ', media_id, lang);
}
function tvpQualityChange(instance, media_id, quality){
	/* called on quality change. Returns player instance, media_id, quality. */
	//console.log('tvpQualityChange: ', media_id, quality);
}

After tvpSetupDone gets called, public API can be used.

Public API

API methods are located in jquery.tvp.js file starting with this:

// ******************************** PUBLIC API **************** //
/* play active media */
this.playMedia = function() {
    if(!_componentInited || _playlistTransitionOn || !mediaType) return false;
    if(mediaPlaying) return false;
    if(mediaType == 'local'){
        togglePlayBack();
    }else if(mediaType == 'youtube'){
        if(_youtubePlayer) _youtubePlayer.play();
    }
    mediaPlaying=true;
}
...

Using videos20script