Video with Captions/Subtitles (JW Player)

Video with Captions/Subtitles (JW Player)

by Frank Erazo -
Number of replies: 4

Moodle version: 2.2+

If you are interested in making your video (FLVs) play on mobile devices such as the iPad or iPhone, you'll need to download the JW Player (http://www.longtailvideo.com).  JW Player can make your video cross-browser compatible.  Additionally, you'll only need one file format - MP4. 

Next, use Handbrake (http://handbrake.fr), to convert your existing FLVs into MP4s.

If you have any existing caption/subtitle files (probably in XML format), you'll need to copy and paste them into a new file with an *.srt file extension.  JW Player allows you to point to these SRT files so they can be seen on any browser.  But for iPads and iPhones, it will not work.  

For iPads/iPhones, you will have to merge the SRT file into the MP4.  Using Handbrake, it's simple as point and select the file.  So make sure you have the caption file(s) created before you begin converting your files.  Unfortunately, users on iPads/iPhones will have to manually turn on their captions, so you'll have to make a note of that in your content.   


When you download the JW Player, it will have several files in the zip package. The two most important are the player.swf and jwplayer.js. There is another file called readme.html which contains an example of the code you'll need to copy and paste into an editor window - you'll have to paste it on the HTML side.  In the readme.html, you'll see the HTML comments (labeled START OF THE PLAYER EMBEDDING and END OF PLAYER EMBEDDING). For a single video, copy and paste the code into a Resource such as a Page.  

The attached file contains the sample code for one video, but all you need to do is change the server, video and caption file names.  

Also included in the file is the code for a playlist that will automatically play and continue to the very end.  This playlist also uses caption files.  

Enjoy!

Average of ratings: -
In reply to Frank Erazo

回复: Video with Captions/Subtitles (JW Player)

by Frankle Lee 李智高 -

I tried your code and it did not work on my moodle 2.6

I try the official code of jwplayer 6.0 and my system keep adding "<![CDATA [" to the code i pasted into the html editor which may cause the codes totally invisble to the browser.

Any idea about this?


<div id="mediaplayer">JW Player goes here</div>

<script src="http://www.welearning.net.cn:30201/moodle/jwplayer/jwplayer.js" type="text/javascript"></script>

<script type="text/javascript">// <![CDATA[

jwplayer("mediaplayer").setup({

flashplayer: "http://www.welearning.net.cn:30201/moodle/jwplayer/player.swf",

autostart: true, 

file: "

",

height: 480, 

width: 640, 

plugins: {

"captions-2": {

file: "http://www.welearning.net.cn:30201/moodle/pluginfile.php/4260/mod_data/content/10/8_rules_for%20using_THE_in_English.srt"

}

}

});

// ]]></script>


In reply to Frankle Lee 李智高

Re: 回复: Video with Captions/Subtitles (JW Player)

by Nagy Gábor Zsolt -

This code works for me in Moodle 2.6:

<div id="myElement">Loading the player...</div>
<script type="text/javascript">
jwplayer("myElement").setup({
    playlist: [{
        file: "http://www.example.org/draftfile.php/171/user/draft/927794117/Getting_Started.mp(four)",
        image: "/assets/sintel.jpg",
        tracks: [{
            file: "http://www.example.org/draftfile.php/171/user/draft/927794117/Getting_Started.srt",
            label: "English",
            kind: "captions",
            "default": true
        },{
            file: "http://www.example.org/draftfile.php/171/user/draft/927794117/Getting_Started.srt", 

            kind: "captions",
            label: "Hungarian"
        }]
    }]
});
</script>

Please note to copy jwplayer under the root directory and add the following two lines into the <head> section of you theme:

<script src="/jwplayer/jwplayer.js" ></script>
<script>jwplayer.key="your_jwplayer_token_key";</script>

Also turn off QuickTime player on the SITE ADMINISTRATION / APPEARANCE / MEDIA   EMBEDDING page.

Cheers

In reply to Nagy Gábor Zsolt

Re: 回复: Video with Captions/Subtitles (JW Player)

by Brija Gentian -

hello. i would like to have your help. thank

In reply to Frank Erazo

Re: Video with Captions/Subtitles (JW Player)

by Brija Gentian -

Hello Brother of Good.

My goal, is that to decide an option into (repeat-player.php.)


This is the original repeat-player.php script file
I would like to make this repeat-player.php script file with this option

But. I'm not a programmer in PHP script. 
There is the script file repeat-player.php 
repeat-player.php
https://www.dropbox.com/s/vubpnkaafy43wa9/repeat-player.php?dl=0
player.php
https://www.dropbox.com/s/onzh3z8qu80g6hf/player.php?dl=0

Please, make do something. 

And send me the link to download your job php file

Thank




@frank erazo
#frank erazo