kaltura/mwembed

Kaltura's Cross Platform Video Player ToolKit

Library Overview

Kaltura's HTML5 Media Library enables you leverage a unified configuration and development API for both HTML5 and Flash. It enables delivery of rich on page and in player experiences backed by robust metadata and per device asset delivery of the kaltura platform. It supports a wide range of features, an external and internal plugin model, advanced html5 player, and custom skins.

Documentation

Your first stop for kaltura related integration questions should be the Kaltura HTML5 Configuration

Library documentation for installation, configuration, and usage is maintained on the html5video.org wiki

Also you can find us on #kaltura in irc.freeNode.net

Can't find what your looking for in the documentation, ran into an issue check the Kaltura players official forums.

Quick start

• Extract or git clone the mwEmbed folder to your php server.
• Copy LocalSettings.php.sample to LocalSettings.php
• Navigate to http://{yourServer}/path/to/mwEmbed/docs for player examples.

Hacking on mwEmbed

• Pull requests can be sent to our git hub repo. Pull requests should be open against the master branch.
• Our coding conventions follow mediaWiki js guidelines.
• See getting strated guide
• Also see Yeoman project for auto generating skeleton kaltura player plugins.

Release Notes

Release Notes documents every release and provides production, staging and zip downloads.

Libraries and sub-projects

Kaltura developed

• Chromless flash kdp
• Chromeless sliverlight
• OSMF HLS for flash -- repo not yet public
• Android HLS player -- repo not yet public
• Player Studio -- visual player config JSON editor

External libraries

• Resource Loader
• jQuery
• bootstrap -- for documentation pages
• Shaka Player -- for project page
• hls.js -- for project page

Library Features

The kaltura player feature hub hosts most of the libraries features and associated test files.

Timed Media Handler

Kaltura HTML5 library is the upstream library for the wikimedia video support in Timed Media Handler

License and Copyright Information

All mwEmbed code is released under the AGPLv3 unless a different license for a particular library is specified in the applicable library path

Authors: See GitHub contributors list.

mwembed's Issues

Html5IframeApiTest.html is broken

Test file:
http://localhost/html5.kaltura/mwEmbed/modules/KalturaSupport/tests/Html5IframeApiTest.html

Not sure if this test is relevant anymore, especially when we remove the postMessage API.

Video in wrong position after changeMedia

Test file:
http://localhost/html5.kaltura/mwEmbed/modules/KalturaSupport/tests/ChangeMediaEntry.qunit.html?forceMobileHTML5

Detected in v1.6.10

Tested on Chrome.

After switching between entries. the video is pushed to the left.

[1890] the pre roll ad is displayed behind the Transparent frame when playing the play list and moving to the next video

when moving to the next video from the play list in full screen mode during a playing ,some issues occur:
1.the pre roll is displayed on the half of the screen.
2.the play button displayed on the left for a while
3.the ad is displayed behind the Transparent frame
4. "skip ad " is disable in full screen mode

http://prod.kaltura.co.cc/index.php/kmc/preview/partner_id/1141/uiconf_id/4626131/playlist_id/0_fe4fph6x/playlist_name/random%20playlist

happens on iPad and PS support browsers
see attached
http://img804.imageshack.us/img804/1449/img12071.png
http://img638.imageshack.us/img638/1040/img12061.png
http://img844.imageshack.us/img844/9055/img12051.png
http://img600.imageshack.us/img600/2193/fullscreenpreroll.jpg

ReadyCallback.html test should be a QUnit test

Avi thanks for adding the ReadyCallback test, but please structure the test so that its an automated qunit test and then rename the file to ReadyCallback.qunit.html
/modules/KalturaSuppor/tests /ReadyCallback.html

android 3x HLS breaks on iOS appstore required audio flavor

We have reports that android 3x HLS breaks on iOS when it includes the audio flavour, we should probably do user agent detect and remove the low bitrate audio flavour form the HLS url when on android. (or this should be addressed server side with an additional tag set to target android )

Audio playlist layout broken

On audio playlist, the list is not positioned correctly.

Test file:
http://localhost/html5.kaltura/mwEmbed/modules/KalturaSupport/tests/AudioPlaylist.html?forceMobileHTML5

Detected in: v1.6.10

Toggle captions show/hide results in change layout

Test file:
http://localhost/html5.kaltura/mwEmbed/modules/KalturaSupport/tests/CaptionsKalturaApi.qunit.html?forceMobileHTML5

Detected in v1.6.10

Tested on Chrome.

When using the toggle button the caption layout changed from "Captions over player" to "Below the player"
The toggle button should just "show/hide" and should not change the layout mode.

Steps to reproduce:

1. Play the video.
2. Captions menu > Layout > On top of video
3. After you see the first caption click on 'Toggle captions'

Also If you play the video and click 'Show captions' and video will jump to the bottom.

swfObject 1.5 test file is broken

Test file:
http://localhost/html5.kaltura/mwEmbed/modules/KalturaSupport/tests/EmbedSWFObject.1.5.html

The player is not displayed for both Flash and HTML5 players.

MRSS Playlist is broken

Test File:
http://localhost/html5.kaltura/mwEmbed/modules/KalturaSupport/tests/PlaylistKalturaMRSS.html?forceMobileHTML5

Detected in v1.6.10

MRSS Playlist need some love.

Missing events for Kaltura Analytics plugin

Testing:
http://localhost/html5.kaltura/mwEmbed/modules/KalturaSupport/tests/Analytics.html?forceMobileHTML5

I've noticed OPEN_FULL_SCREEN and CLOSE_FULL_SCREEN are not sent.
We should validate that all events are working and check if we're missing events.

[1881] when switching to Full Screen, the size of the content displayed within the video player is smaller than the originally loaded parameters

when switching to Full Screen, the size of the content displayed within the video player is smaller than the originally loaded parameters

we have a mantis ticket about this issue

Steps :

go to KMC->create entry with mobile flavors ->play it on iPad or HTML5 supported browsers.

verified on prod.qa

partner :681

http://prod.kaltura.co.cc/index.php/kmc/preview/partner_id/681/uiconf_id/4624471/entry_id/0_n56jh6sh/delivery/http?forceMobileHTML5

Screenshot:
http://img195.imageshack.us/img195/5022/img2675vn.jpg

Kdp Api Play From/To not working on iPad

Test file:
http://localhost/html5.kaltura/mwEmbed/modules/KalturaSupport/tests/kdpApiPlayFromTo.html

Detected on iPad 2 iOS 5.1

When clicking on Preview button. the iPad started playing from 30 second and not from 10 to 30.

[1877] The Quicktime 'Q' Logo appears before every Content play

The Quick time 'Q' Logo appears before every Content play

Description:

When a new item from the play list or new alone video loads, before starting the Quick time 'Q' Logo appears.
This occurs before every Content play.

we have opened bug in mantis about this issue on Jessie site but it reproducible on prod with new html5 v1.6.9

steps to reproduce

1.Go to KMC ->create entry /play list with mobile flavors
2.Create new relavant player
3.Open the created entry via Preview & embed
4.Select "Support iPhone & iPad with HTML5"
5. Using iPad, open a shortlink : prod.kaltura.co.cc/tiny/vg55
6. Start the content
7. Observe issue

Notes:
it was verified with latest html5 v1.6.9

Environment:
prod.qa ->iPad

Screenshots:
http://img836.imageshack.us/img836/9388/img1203.png
http://img824.imageshack.us/img824/7901/img1189.png

search device sources for a AppleMBR flavor id instead of using a flag

code comment: 4630fa8#commitcomment-1138665

Fullscreen / Video size issues

QC Issues:

#1943 - In fullscreen - after ads is done, movie is not stretched to the whole space

was firstly found in HTML5 v1.6.9.3

· Full screen issue while ad is shown:
a. Navigate to this preview page (http://prod.kaltura.co.cc/index.php/kmc/preview/partner_id/681/uiconf_id/4625451/entry_id/0_bd34hn2q/delivery/http)
b. While ad is shown, click the full screen button
c. Skip it or let it end – so the movie will begin
d. Result: Video is not stretched to the whole page:

Bug is easily reproduced on this preview page (http://prod.kaltura.co.cc/index.php/kmc/preview/partner_id/681/uiconf_id/4625451/entry_id/0_bd34hn2q/delivery/http) using iPad2, while this entry doesn’t have bumper option enabled.

Please see attached screenshot

#1928 - The content of http://www.warnerbros.com plays on iPad in smaller size than on supported browsers

#1509 - Full Screen: If seek in the video and then move to the next video, the video is not centralized in the player, even when return to regular mode

prod.qa , iPad2 V4.3.1
Partner id = 391,
KMC V4.2.14.12, KDP V3.5.44
Playlist Id (Manual) = 0_102ncvow, Player Id (Vertical)= 4613111
HTML5 V1.6.3

Short Link = http://prod.kaltura.co.cc/index.php/kmc/preview/partner_id/391/uiconf_id/4613111/playlist_id/0_102ncvow/playlist_name/Manual%20Playlist

1. Play the short link via iPad
2. Move to Full Screen mode
3. Seek in the video and then move to the next video (with the forward arrow)

Results: The next video and all videos appears in the player differntly -> they are not centralized and displaying more down -> NOT OK!

1. Return to a regular mode and move to the next video

Results: The videos are not centralized in the player and appears more down -> NOT OK!

#970 - After video arrived to his end while playing it in Full Screen, the Play button appeared on the top video and not in the middle & there is Java Script error

Partner Id = 289812, Entry Id = 1_j27tqm5k, Player Id = 6107781, html5 V1.5.9

Short link:
http://www.kaltura.com/index.php/kmc/preview/partner_id/289812/uiconf_id/6107781/entry_id/1_j27tqm5k/delivery/http

1. Define on the player: Pre & Post rolls
2. Define 3 CuePoints:
   a. On the 10sec, Type = Video, Provider = Vast, URL = http://d1.openx.org/fc.php?script=bannerTypeHtml:vastInlineBannerTypeHtml:vastInlineHtml&source=&format=vast&charset=UTF_8&nz=1&zones=z1=182104
   b. On the 20 sec, Type = Overlay, Provider = VAST, URL= http://kaldev.kaltura.com/myopenx/www/delivery/fc.php?script=bannerTypeHtml:vastInlineBannerTypeHtml:vastInlineHtml&source=&format=vast&charset=UTF_8&nz=1&zones=z1=19
   c. On the last minute for the video (01:25): Type = Video, Provider = Vast, URL = http://d1.openx.org/fc.php?script=bannerTypeHtml:vastInlineBannerTypeHtml:vastInlineHtml&source=&format=vast&charset=UTF_8&nz=1&zones=z1=182104
3. Play the short link via iPad in Full Screen

Results:

1. At the end of the video play in Full Screen, the Play button appears at the top of the video and not in the middle
2. Java script error appeared

Volume control does not work for Ads

When watching video ad with the Video Sibling enabled, the volume control does not work.

Can be reproduce here:
http://localhost/html5.kaltura/mwEmbed/modules/KalturaSupport/tests/AdSupportOpenX.html?forceMobileHTML5

Tested on Chrome.

Thumbnails are black sometimes on iPad

We should build a image based poster support to display an image instead of relying on the poster attribute which is unreliable on the iPad.

add small loading spinner support to 1.7

a43f907

loading spinner is refactored in 1.7 be sure to support the small spinner since this won't automerge in updates

Chapters on page plugin - end to end workflow for JS player plugins -

please create an exchange listing for a JS plugin that shows chapters.
should work on ipad and PC
get the detailed wireframes from Nir.

authoring part would be through KMC , via cuepoints API.
the point is to have a good documentation so that we start developing plugins in HTML a cross browsers instead of Flash.
should communicate that to PS team.

DynamicKEntryId.qunit.html should be removed

Test file:
http://localhost/html5.kaltura/mwEmbed/modules/KalturaSupport/tests/DynamicKEntryId.qunit.html

This test uses the Inline player which we not support any more.
Also kWidget.embed gives better way to dynamically embedding players.

Upgrade jQuery to latest

We should upgrade jQuery library version to latest (1.7.2) and make sure nothing breaks.

Overlayed Controls not disappearing in fullscreen

QC #1394: Play button appeared at the left side and it's not centrelaized

We should make sure the big play button is always positioned at the center of the player area.
Regardless of state (fullscreen) or widget (ppt widget/playlists)

kWidget.embed should support multiple players on a single page.

Ran I don't know if you saw this commit 80afdd1 but you should be sure there is a test file with multiple embed calls in your kWidgetLoader branch.

This may be less of an issue once we complete the kWidget re-factor because, we won't be loading any additional client side resources in the normal case. And external resources associated with a given uiConf should block player build out in a different way.

At any rate we should have a test page that includes more than one kwidget embed call and more than one uiConf.

[1886] captions are not displayed on HTML 5 player

captions are not displayed on HTML 5 player

1.Create entry with captions
2.create player support subtitles
3.play the video on iPad or supported browser.

partner :681
entry : 0_xcqy3b85
uiconf : 4625191

http://prod.kaltura.co.cc/index.php/kmc/preview/partner_id/681/uiconf_id/4625191/entry_id/0_xcqy3b85/delivery/http?forceMobileHTML5

No video only sound on iPad

Test file:
http://localhost/html5.kaltura/mwEmbed/modules/KalturaSupport/tests/AdSupportOpenX.html
http://localhost/html5.kaltura/mwEmbed/modules/KalturaSupport/tests/BumperAdTest.html

Detected on iPad 2 iOS 5.1

When playing the video, I hear the sound of the ad, but there's no image.
After i skip the ad, I still can't see the content video (only sound)

QC #2029: Analytics events on Playlists

This is the same bug we had with KDP (mantis 14533) :
The statistics for the first video of each playlist are too high compared to the rest.
Seems like events aren't properly reset when changing media - If an event is sent for the first entry, it won't be sent for the next entries.

Steps to reproduce:
Use this page to observe issue: http://prod.kaltura.co.cc/index.php/kmc/preview/partner_id/1141/uiconf_id/4628871/playlist_id/0_4vym8ze9/playlist_name/html5%20playlist?forceMobileHTML5
Play the first movie - reach to 25% and 50%
Move to the next movie - wait for its 25 and 50% - stats are not being sent. 75%, however, will be sent.

Was tested using iPad2

iPad Issues

QC Issues:

#1937: When turning the iPad during playing the playlist in full screen mode and then exit from full screen - the player is stretched and displayed in size bigger than original

#1919 - When zooming a screen when video is playing - the player is stuck

when zooming a screen during the video is playing - the player is stuck
steps to reproduce:

1.go to http://prod.kaltura.co.cc/index.php/kmc/preview/partner_id/681/uiconf_id/4625271/entry_id/0_j5oovk26/delivery/http
2.play the video
3.zoom the screen
4.player is stuck : the video is continue to play
the play button displayed on the player
the control bur is no clickable

#1877 - The Quicktime 'Q' Logo appears before every Content play

#1336 - Sometimes there's not thumbnail on iPad

Image bumper playback started before image fully loaded

Test file:
http://localhost/html5.kaltura/mwEmbed/modules/KalturaSupport/tests/ImageEntryBumpers.html?forceMobileHTML5

Detected in v1.6.10

Tested on Chrome

When you play the bumper i've noticed that the "playback" started before the image fully loaded.
We should wait for image 'loaded' event and then start the 'playback'.

[1883] when supplying an entry in the player which does not exist in the play list ,the last entry is played as first

when supplying an entry in the player which doesn't exist in the play list ,the last entry is played as first

when selecting a player that has 'initItemEntryId " to play a play list that doesn't include that entry ,

the last entry plays as a first .

verified on prod.qa with html5 v1.6.9

play it on iPad or browsers supported html5

http://prod.kaltura.co.cc/index.php/kmc/preview/partner_id/681/uiconf_id/4625131/playlist_id/0_h1vzvu7x/playlist_name/new html5

Timeline refactor

Timeline refactor

#highPrioirty better timeline support for pre/mid/post events during video playback

• Start flow pre sequence refactor
  • The html5 play mechanics don't identically mimic the KDP mechanics.
  • Is there any uiConf property to designate if the playhead should update during a given ad?
  • Make more of the timeline part of "core" vs trying to handle it all in the adTimeline.
  • Need to separate out "contentPlay" vs "play"
  • Inconsistencies in flash KDP ad plugins state modifications
• Video end flow / post sequence refactor.
  "#highPrioirty"
  • Use separate end events for content, ads, and playlists
  • Not clear if this is the source of some bugs

Created with WorkFlowy.com

QC #1370: Loading Spinner not centrelized when moving to the next video in Full Screen

We should make sure the loading spinner is always positioned at the center of the player area.
Regardless of state (fullscreen) or widget (ppt widget/playlists)

Captions issues

QC Issues:

#1921 - Video is displayed on the lower half of the screen when enabling/disabling subtitles in full screen

create a new player with captions support.
Start playing a movie with captions and switch to full screen.
When in full screen, click the subtitles button (left of the full screen button) -> layout -> hide subs.

Result:
the movie will be displayed on the lower half of the screen.

http://prod.kaltura.co.cc/index.php/kmc/preview/partner_id/1371/uiconf_id/4625341/entry_id/0_w5tgq50u/delivery/http?forceMobileHTML5

#1898 - the captions displayed during Ad playing on html5 player

http://prod.kaltura.co.cc/index.php/kmc/preview/partner_id/681/uiconf_id/4625271/entry_id/0_j5oovk26/delivery/http?forceMobileHTML5

#1611 - Caption label display incorrectly

When playing video with caption I see the following:
Caption label display in gibberish (please see attached print screen).
In case there is more then 1 caption file for an entry, on player you can see only the default caption.
It is impossible to switch between captions: No matter what is the caption language (as set in entry drill down), it is always shows on HTML5 player the same label.

#1614 - Caption with colord text (span) is not supported in HTML5

Caption with colord text (span) is not supported in HTML5.
See attached print screen and caption's xml file.
Example:
test Future Splash test2 Future Splash2

Mantis:14939 Add Playlist Plugin API notifications to match KDP

support playlist api notifications

[1887] When switching back to normal screen from full screen during playing a play list - the video still displayed on full screen and showing behind the videos list

when switching back to normal screen from full screen during playing a play list - the video still displayed on full screen and showing behind the videos list on iPad

the last video in the list is cut on iPad and the scroll is displayed on the PS browsers

1.go to KMC->select play list ->preview& embed
2.play short link on iPad or supported browser

see screenshots:
http://imageshack.us/photo/my-images/831/ipadnormalscreen11.png/
http://imageshack.us/photo/my-images/10/ipadnormalscreen22.png/
http://imageshack.us/photo/my-images/515/ipadnormalscreen33.png/

partner :681
playlist :0_7xzg8blp

uiconf:4625231

http://prod.kaltura.co.cc/index.php/kmc/preview/partner_id/681/uiconf_id/4625231/playlist_id/0_7xzg8blp/playlist_name/8.3.2012?forceMobileHTML5

Cue Points 3 Ads test file miss-configured?

Test file:
http://localhost/html5.kaltura/mwEmbed/modules/KalturaSupport/tests/CuePoints3Ads.html?forceMobileHTML5

Detected in v1.6.10

Not sure if it's configuration issue or not. But I didn't get to see any one of the ads. and it looks like only the first cue point was triggered.

kWidget.embed does not take inhert size of target

kWidget.embed should check for inherited size of target if for example css rules set the size of the target it should read that size.

Reference ID test is broken

Test file:
http://localhost/html5.kaltura/mwEmbed/modules/KalturaSupport/tests/ReferenceId.html?forceMobileHTML5

Detected in v1.6.10

Looks like Reference ID test is failing.
I'm getting "No source video was found".

[1889] when turning the iPad during playing the playlist in full screen mode - the player is stretched and control bar is disappeared

when turning the iPad during playing the playlist in full screen mode - the player is stretched and control bar is disappeared

play a play list on iPad with horizontal play list player

http://prod.kaltura.co.cc/index.php/kmc/preview/partner_id/681/uiconf_id/4625231/playlist_id/0_c66igf2f/playlist_name/1.6.9

Screenshot:
http://img32.imageshack.us/img32/4610/img12041.png

Seek issues

QC Issues:
#1360 - Occurred sometimes: When seek in the player, the video is playing with 'Seeking' status
#1366 - When seek to other point in the video, the scrubber moved back & forward for few times and then the video continue playing
#1014 - During the entry play, click on the scrubber in few places, the HTML5 player was stopped playing the entry

Removing postMessage API for IFrame client/server communication

For better performance and working around issues on iPad, we need to remove all postMessage communication between Iframe client side and Iframe server side and instead use direct calls to the iframe.

Test GitHub Issues

this is a test of github issues

Mantis:14906 Preview and Continue with KS KDP API ( cent2cent style video purchase )

Flash player example: http://www.cent2cent.net/kaltura/index.php
HTML5 stubs: http://www.cent2cent.net/kaltura/html5.html

GitHub Notifications Should Email Mailing List

I've created an 'html5 video' team in the kaltura organization, this may resolve the issue.

AgeGate Plugin

We need to re-write the plugin, as normal Javascript plugin instead of PHP.
The current plugin uses window.location.href to refresh the iframe which will not work with our friendly iframe.

flashvars not ready at jsCallbackReady time

flash kdp makes flashvar configproxy available at jsCallback ready time, HTML5 library should do the same

[mantis 14157] iPhone playlist exits on clip switch

When trying to embed the code with in the KMC
Even though the (Automaticly continue to the next entry is enabled).
this feature does not work.

Android 3.x tablet fails for html controls

The player crashes the Xoom Android Browser when loaded on the actual device. It also does not show up properly. The embed seems to be wider than the box, no image ever shows up, and video does not play. If loaded a second time, the browser crashes. This is on Android 3.2.2.

PPT Widget test

Test File:
http://localhost/html5.kaltura/mwEmbed/modules/KalturaSupport/tests/PPT_Widget.html?forceMobileHTML5

The player is not loading.
Got this error in console:
Uncaught SyntaxError: Duplicate data property in object literal not allowed in strict mode

Duplicate tests for doubleClick

We have two duplicate tests for doubleClick campanion ads. If not needed one should be removed.
Also would be better to move to DoubleClick/tests folder.

http://localhost/html5.kaltura/mwEmbed/modules/KalturaSupport/tests/AdFlashvarVastDoubleClickCompanion.qunit.html
http://localhost/html5.kaltura/mwEmbed/modules/KalturaSupport/tests/AdVastDoubleClickCompanion.qunit.html