1 Week 7
- Nice HTML5/SVG site: http://middle-earth.thehobbit.com/ (Read The Front-end of Middle-earth)
- Video editing
- Using HTML5 Players
- Creating HTML5 captions with WebVTT
- Creating Screencasts
- (Simple) editing video files
- Discussion of homework, term project, mid term
- Recall of HTML5 video principles (week 6)
- Video editing
- Video and audio converters
- HTML5 Captions
- LeanBackPlayer exercise
- LeanBack Player
- Download from here and unzip the library within a folder that you could name "project6".
- Create the player code with the HTML5 Generator.
- Tick most everything except autoplay and loop
- You already can substitute the video file names (but you also can do that later). We suggest doing it now, e.g. use myvideo.mp4, myvideo.webm, etc.
- Keep the browser tab open (you will need to copy/paste the code)
- In the directory you just created, create a new HTML5 file using the template below:
<!doctype html> <html> <head> <meta charset="UTF-8"/> <title>HTML 5 video</title> <!-- Insert the header code about here and kill this line --> </head> <body> <h1>Title that you should set </h1> <p>Intro that you should change ....</p> <!-- Insert the body code about here and kill this line --> <hr/> <a href="http://validator.w3.org/">W3C validator</a> </body> </html>
- Fix the URLs in the code:
- Reaplce the abolute "http://yourdomain.com/..." URL by "js.player" and css.player. Look at the code and think !.
- Change the name of the video files if needed.
- Change the name of the poster files, i.e. substitute "http://leanbackplayer.com/videos/poster/elephants_dream_640x360.jpg" by "myposter.jpg".
- Test: If the video does not show then you likely:
- must have put the JS and CSS libraries in some other place (not the same directory). Fix the URLs, look at your directory !
- must have deleted some important line of code
- must have have syntax errors: validate your code
- Tip: Open the error console in your browser: In Firefox: Tools->Web Developer->Error console
- Using track with LeanbackPlayer
- See WebVTT
- Look at the code of http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html
- Code below is taken from this file and should be inserted right after the source elements
<track enabled="true" kind="subtitles" label="EN" src="subtitles_en.srt" srclang="en" type="text/x-srt"/> <track enabled="true" kind="subtitles" label="EN VTT" src="subtitles_en.vtt" srclang="en" type="text/vtt"/> <track enabled="true" kind="subtitles" label="FR" src="subtitles_fr.vtt" srclang="fr" type="text/vtt"/>
WebVTT template to copy/paste into a file called something like subtitles_en.vtt
WEBVTT Introduction 00:00:01.000 --> 00:01:10.000 Wikipedia is a great adventure. It may have its shortcomings, but it is the largest collective knowledge construction endevour Disclaimer 00:01:10.000 --> 00:02:10.000 This is just a track demo using VTT
1) Exam/term project Q/A
(2) WebVTT hands-on
- Get the HTML file done on Monday and add captions files, look at this example
- You can start from this VTT file: subtitles_en.vtt (rename it if necessary)
If you missed class:
- Download and dezip LeanBack Player
- Save the following file and start from there: html5-video-track-leanbackplayer.html
(3) Creating screencasts:
(4) Video and audio editing (part II)
1.4 Homework 7
None, but see homework 6 announced in week 6