Skip to content
Jesús Oliva edited this page Oct 2, 2018 · 21 revisions

Content Prep

Encoding/transcoding is a pretty complex topic. The FFmpeg/x264/mp4box workflow is generally fine and it is what we use in the Axinom reference encoder. My general suggestions regarding the most critical points in this regard:

  • Always use DASH live profile (mp4box -profile "dashavc264:live")
  • Ensure that your encoder uses a fixed keyframe distance that is equal to your segment size (or a multiple of which is equal to it); FFmpeg has some defects here leading to bad output; with x264 the following works: --keyint 59 --min-keyint 59 --no-scenecut
  • Use dash-strict mode with mp4box if you use fixed keyframe distances (mp4box -dash-strict 4000) - the default dash mode produced unexpected deviations last I tried it
  • To avoid FFmpeg being clever with frame drop/duplication, use -vsync passthrough
  • Watch out for aspect ratio issues! Not all input content has SAR 1:1!
  • Do not use bitstream switching (mp4box -bs-switching no)
  • If using encryption, put PSSH box information only in the manifest; (no PSSH data in crypt.xml for mp4box); also mp4box -sample-groups-traf made encrypted video work better in more players but I forget why

Codecs

  • Safari <=9 does not support AVC3
  • Internet Explorer 11 can play AVC3, but only if you signal to the browser it is AVC1
  • MEDIA_ERR_DECODE indicates an issue with your stream, not dash.js.

Browser Support

  • Firefox < 49 may sometimes fail to start playback on dynamic streams, or streams with a #t= URL fragment

Networking

ABR Logic

Scheduling And Buffer

How do I add a header to outgoing requests?

How do I destroy the player?

  • Only MediaPlayer.reset() should be required to destroy the player.

Webpack Integration

Dash.js v2.6.3 and below

In these versions MediaPlayer is not exported in the main module but it is set as a property of dashjs global object. Use it in your webpack based projects in this way:

import 'dashjs';

let url = "https://dash.akamaized.net/envivio/Envivio-dash2/manifest.mpd";
let player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector('#myMainVideoPlayer'), url, true);

Dash.js v2.6.4 and above

MediaPlayer is exported in the main module, and set as a property of dashjs global object. Use it in your webpack based projects in this way:

import MediaPlayer from 'dashjs';

let url = "https://dash.akamaized.net/envivio/Envivio-dash2/manifest.mpd";
let player = MediaPlayer().create();
player.initialize(document.querySelector('#myMainVideoPlayer'), url, true);
Clone this wiki locally