A web component for playing back videos

Known issues:

Made possible by

Thanks for the great work!


Have a look at https://opensource.org/licenses for details


bower i dash-video

Using the component

You need to include the following lines in the head section of your html file

<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import"  href="bower_components/src/dash-video.html">

Setting up your first video using the dash-video tag

<dash-video autoplay loop style="width:1280px; height:720px;" id="dash-video-player">
    <!-- dash video -->
    <source type="application/dash+xml"     media="screen and (min-width:1005px)"   src="http://whaever." />

    <!-- normal html5 video -->
    <source type="video/mp4"                media="screen and (min-width:1025px)"   src="video/input_1080p.mp4" />

    <!-- special video for ios, note the data-crapple attribute -->
    <source type="video/mp4"                media="screen and (min-width:125px)"    src="video/crapple_hi.mp4" data-crapple/>

That's it!

If you have trouble loading video files from localhost while developing you may start the node server that set the correct cors headers:

npm i
node server.js

The server listens on port 8000, you can now navigate to (localhost:8000)[http://whatever.]


The api currently supports only two methods. Create an issue if you need more functionality!

play() method

plays / resumes playback


pause() method

pauses playback


Encoding Videos

Those are instructions for ubuntu 15.10. It's a pain in the ass!

Compiling ffmpeg and dependecies

You have to compile an up to date version of ffmpeg in order to create dash and apple compatible video files.

first install required tools

sudo apt-get install cmake make g++ git-core gcc yasm

then install dependencies

sudo apt-get install libx264-dev

get the required source files from https://www.xiph.org/downloads/ and compile them


wget http://downloads.xiph.org/releases/ogg/libogg-1.3.2.tar.gz
tar xzvf libogg-1.3.2.tar.gz
cd libogg-1.3.2
sudo make install


wget http://downloads.xiph.org/releases/vorbis/libvorbis-1.3.5.tar.gz
tar xzvf libvorbis-1.3.5.tar.gz
cd libvorbis-1.3.5
sudo make install


git clone https://chromium.googlesource.com/webm/libvpx
cd libvpx
sudo make install


git clone git://source.ffmpeg.org/ffmpeg.git
cd ffmpeg
# maybe: cmake
./configure --enable-libvpx --enable-libvorbis --enable-gpl --enable-libx264
sudo make install

If i forgot something please file an issue!

MP4 video

ffmpeg -i input_720.webm -c:v libx264 -s 1280x720 -b:v 1500k -f mp4 -metadata title="My Cool Video" encoder="ffmpeg" -c:a copy -movflags +faststart video_720p_500k.mp4

Video for Crapple devices

ffmpeg -y -i input3_720p.mp4 -r 30000/1001 -b:a 2M -bt 4M -vcodec libx264 -pass 1 -coder 0 -bf 0 -flags -loop -wpredp 0 -an crapple_hi.mp4

Dash Video

See DASH & VP9 for a short explanation!

VIDEO_TITLE="My Cool Video"

VP9_DASH_PARAMS="-tile-columns 4 -frame-parallel 1"

# create videos in different qualities
ffmpeg -i input.mp4 -c:v libvpx-vp9 -s 160x90 -threads 4 -b:v 250k -keyint_min 150 -g 60 ${VP9_DASH_PARAMS} -an -metadata title=${VIDEO_TITLE} -metadata encoder="ffmpeg" -r 30 -f webm -dash 1 long_video_90p_250k.webm
ffmpeg -i input.mp4 -c:v libvpx-vp9 -s 320x180 -threads 4 -b:v 500k -keyint_min 150 -g 60 ${VP9_DASH_PARAMS} -an -metadata title=${VIDEO_TITLE} -metadata encoder="ffmpeg" -r 30 -f webm -dash 1 long_video_180p_500k.webm
ffmpeg -i input.mp4 -c:v libvpx-vp9 -s 640x360 -threads 4 -b:v 750k -keyint_min 150 -g 60 ${VP9_DASH_PARAMS} -an -metadata title=${VIDEO_TITLE} -metadata encoder="ffmpeg" -r 30 -f webm -dash 1 long_video_360p_750k.webm
ffmpeg -i input.mp4 -c:v libvpx-vp9 -s 640x360 -threads 4 -b:v 1000k -keyint_min 150 -g 60 ${VP9_DASH_PARAMS} -an -metadata title=${VIDEO_TITLE} -metadata encoder="ffmpeg" -r 30 -f webm -dash 1 long_video_360p_1000k.webm
ffmpeg -i input.mp4 -c:v libvpx-vp9 -s 1280x720 -threads 4 -b:v 1500k -keyint_min 150 -g 60 ${VP9_DASH_PARAMS} -an -metadata title=${VIDEO_TITLE} -metadata encoder="ffmpeg" -r 30 -f webm -dash 1 long_video_720p_500k.webm

# audio track
ffmpeg -i input.mp4 -c:a libvorbis -b:a 128k -vn -r 30 -f webm -dash 1 long_audio_128k.webm

# set cue points
./bin/sample_muxer -i long_video_90p_250k.webm -o long_video_90p_250k_cued.webm
./bin/sample_muxer -i long_video_180p_500k.webm -o long_video_180p_500k_cued.webm
./bin/sample_muxer -i long_video_360p_750k.webm -o long_video_360p_750k_cued.webm
./bin/sample_muxer -i long_video_360p_1000k.webm -o long_video_360p_1000k_cued.webm
./bin/sample_muxer -i long_video_720p_500k.webm -o long_video_720p_500k_cued.webm

# for the audio too
ffmpeg -i long_audio_128k.webm -vn -acodec libvorbis -ab 128k -dash 1 long_audio_128k_cued.webm

# create dash manifest
ffmpeg \
 -analyzeduration 2147483647 -probesize 2147483647 \
 -f webm_dash_manifest -i long_video_90p_250k_cued.webm \
 -f webm_dash_manifest -i long_video_180p_500k_cued.webm \
 -f webm_dash_manifest -i long_video_360p_750k_cued.webm \
 -f webm_dash_manifest -i long_video_360p_1000k_cued.webm \
 -f webm_dash_manifest -i long_video_720p_500k_cued.webm \
 -f webm_dash_manifest -i long_audio_128k_cued.webm \
 -c copy -map 0 -map 1 -map 2 -map 3 -map 4 -map 5 \
 -f webm_dash_manifest \
 -adaptation_sets "id=0,streams=0,1,2,3,4 id=1,streams=5" \