K210.ORG

Implementation

CSS and Image

Insert the CSS in the Head of your HTML document. You'll also need to upload the sprite image (or use your own) and adjust the path in the CSS file.

<link rel="stylesheet" href="/css/px-video.css" />

HTML

Insert the HTML5 video markup in the Body of your HTML document. Replace the video, poster, and caption URLs. Modify the sizes of video and fallback image as needed.

<div class="px-video-container" id="myvid">
    <div class="px-video-img-captions-container">
        <div class="px-video-captions hide" aria-hidden="true"></div>
        <video width="640" height="360" poster="media/foo.jpg" controls>
            <source src="foo.mp4" type="video/mp4" />
            <source src="foo.webm" type="video/webm" />
            <track kind="captions" label="English captions" src="media/foo.vtt" srclang="en" default />
            <div>
                <a href="foo.mp4">
                    <img src="media/foo.jpg" width="640" height="360" alt="download video" />
                </a>
            </div>
        </video>
    </div>
    <div class="px-video-controls"></div>
</div>

JavaScript

Insert the JavaScript file right before the closing Body element of your HTML document. Add a Script element to initialize the video. Options are passed in JSON format. The options are:

• videoId: the value of the ID of the widget container (string) [required]
• captionsOnDefault: denotes whether to show or hide caption upon loading (boolean) [optional, default is true]
• seekInterval: the number of seconds to rewind and fast forward (whole number) [optional, default is 10]
• videoTitle: short title of video; used for aria-label attribute on Play button to clarify to screen reader user what will be played (text) [optional, default is "Play"]
• debug: turn console logs on or off (boolean) [optional, default is false]

<script src="js/px-video.js"></script>
<script>
// Initialize
new InitPxVideo({
    "videoId": "myvid",
    "captionsOnDefault": true,
    "seekInterval": 20,
    "videoTitle": "clips of stand-up comedy",
    "debug": true
});
</script>

Live Demo

View Demo

Feedback and Contributions

If you experience any errors or if you have ideas for improvement, please feel free to open an issue or send a pull request.

You can also follow and contact the PayPal Accessibility team on Twitter: @PayPalInclusive

Authors

• Dennis Lembree, primary developer || https://github.com/weboverhauls || @dennisl
• Victor Tsaran, consultation and testing || https://github.com/vick08 || @vick08
• Jason Gabriele, consultation
• Tim Resudek, design

Browser Support

• Chrome: full support.
• Safari: full support.
• Firefox: full support.
• Internet Explorer 10, 11: full support.
• Internet Explorer 9: native video player used (aesthetic choice since HTML5 range input and progress element are not supported).
• Internet Explorer 8: renders fallback content of video element (in the demo, this is an image linked to the video file).
• Smartphones and tablets: controls and captions are not customized as both are natively supported in latest versions.

Limitations and Known Issues

• Currently, only one caption file per video is supported.
• Only VTT caption files are supported (not SRT nor TTML). VTT cue settings are not supported but inline styles function (see first few lines of example).
• The controls have a minimum width of 360px.

Related Resources

• HTML5 Video Events and API - by W3C
• Adding captions and subtitles to HTML5 video - by MDN
• Simple SubRip to WebVTT converter - tool to convert SRT captions to WebVTT
• Able Player - accessible cross-browser media player by Terrill Thompson

Copyright and License

Copyright 2014, eBay Software Foundation under the BSD license.

Install Debian

First install a minimal debian installation. Pop in a boot stick and run through the installer. Simple stuff. Only thing to note is that we are looking for MINIMAL, so when it asks you which package groups you want, don't select anything (well, maybe ssh).

Install needed packages

aptitude install xserver-xorg-video-nouveau xserver-xorg-video-vesa nodm xorg-common x11-session-utils xinit alsa nfs-common xbmc xbmc-bin xbmc-common xbmc-data xbmc-eventclients-common xbmc-eventclients-dev xbmc-eventclients-j2me xbmc-eventclients-ps3 xbmc-eventclients-wiiremote xbmc-eventclients-xbmc-send xbmc-skin-confluence xbmc-standalone

Configure nodm

Edit nodm config to start on boot, and to run as the correct user

vi /etc/default/nodm

# nodm configuration                                                                                                                                                                
# Set NODM_ENABLED to something different than 'false' to enable nodm                                                                                                               
NODM_ENABLED=true                                                                                                                                                                   
# User to autologin for                                                                                                                                                             
NODM_USER=silver                                                                                                                                                                    
# First vt to try when looking for free VTs                                                                                                                                         
NODM_FIRST_VT=7                                                                                                                                                                     
# X session                                                                                                                                                                         
NODM_XSESSION=/etc/X11/Xsession                                                                                                                                                     
# Options for the X server                                                                                                                                                          
NODM_X_OPTIONS='-nolisten tcp'                                                                                                                                                      
# If an X session will run for less than this time in seconds, nodm will wait an                                                                                                    
# increasing bit of time before restarting the session.                                                                                                                             
NODM_MIN_SESSION_TIME=60 
       

Configure NFS

Test that nfs works

mount 192.168.10.100:/home /mnt
ls /mnt
umount /mnt

Make a new nfs moutpoint

mkdir /penny
chmod 755 /penny/
   

Add to fstab

echo "192.168.10.100:/home    /penny  nfs     ro      0       0" >> /etc/fstab

Test

mount /penny/
ls /penny
   

Graphics setup (without touching X configs!)

Run to allow normal users to start X (Might not be needed)

dpkg-reconfigure x11-common

Edit to remove "quiet" and add "nomodeset". For me, this was all that was needed to make tv out work.

vi /etc/default/grub

# If you change this file, run 'update-grub' afterwards to update
# /boot/grub/grub.cfg.
# For full documentation of the options in this file, see:
#   info -f grub -n 'Simple configuration'

GRUB_DEFAULT=0
GRUB_TIMEOUT=2
GRUB_DISTRIBUTOR=`lsb_release -i -s 2> /dev/null || echo Debian`
GRUB_CMDLINE_LINUX_DEFAULT="nomodeset"
GRUB_CMDLINE_LINUX=""

# Uncomment to enable BadRAM filtering, modify to suit your needs
# This works with Linux (no patch required) and with any kernel that obtains
# the memory map information from GRUB (GNU Mach, kernel of FreeBSD ...)
#GRUB_BADRAM="0x01234567,0xfefefefe,0x89abcdef,0xefefefef"

# Uncomment to disable graphical terminal (grub-pc only)
#GRUB_TERMINAL=console

# The resolution used on graphical terminal
# note that you can use only modes which your graphic card supports via VBE
# you can see them in real GRUB with the command `vbeinfo'
#GRUB_GFXMODE=640x480

# Uncomment if you don't want GRUB to pass "root=UUID=xxx" parameter to Linux
#GRUB_DISABLE_LINUX_UUID=true

# Uncomment to disable generation of recovery mode menu entries
#GRUB_DISABLE_RECOVERY="true"

# Uncomment to get a beep at grub start
GRUB_INIT_TUNE="480 440 1"

update-grub

Create .xsession for nodm/xbmc user

  su silver
  cd ~
  vi .xsession

#!/bin/sh
xbmc

chmod +x .xsession

Reboot the box and see if it works!

At this point you should have xbmc up, and nfs mounted. You may now configure xbmc as you see fit.

(c)