A small library that Video tag use MediaSource Extension to Load video stream.
online demo https://somiframe.github.io/vue-video/
npm install somi-dashjs
Please go to see thisDash Support in MP4Box
After you dashify you video you will get the manifest.mpd and dashvideo
the mpd file like below
<?xml version="1.0"?>
<!-- MPD file Generated with GPAC version 0.6.2-DEV-rev1219-g4007cec-master at 2017-05-18T04:06:16.663Z-->
<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" minBufferTime="PT1.500S" type="static" mediaPresentationDuration="PT0H4M2.091S" maxSegmentDuration="PT0H0M10.000S" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011">
<ProgramInformation moreInformationURL="http://gpac.io">
<Title>manifest.mpd generated by GPAC</Title>
</ProgramInformation>
<Period duration="PT0H4M2.091S">
<AdaptationSet segmentAlignment="true" maxWidth="1280" maxHeight="720" maxFrameRate="25" par="16:9" lang="und" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
<ContentComponent id="1" contentType="video" />
<ContentComponent id="2" contentType="audio" />
<Representation id="1" mimeType="video/mp4" codecs="avc1.4d401f,mp4a.40.2" width="1280" height="720" frameRate="25" sar="1:1" audioSamplingRate="44100" startWithSAP="1" bandwidth="1280527">
<AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="2"/>
<BaseURL>VivaLaVida_dashinit.mp4</BaseURL>
<SegmentBase indexRangeExact="true" indexRange="1437-1900">
<Initialization range="0-1436"/>
</SegmentBase>
</Representation>
</AdaptationSet>
</Period>
// this is es5 version
var dash = require("somi-dashjs").default;
var segmentUrl = '/video/VivaLaVida_dashinit.mp4';
var videoMimeTypeCodecs = 'video/mp4;codecs="avc1.4D401F,mp4a.40.2"';
var initRange = {start: 0, end: 1436};
var sidxRange = {start: 1437, end: 1900};
new dash('#vid1',segmentUrl,videoMimeTypeCodecs,initRange,sidxRange);
// this is es6 version
import dash from "somi-dashjs";
let segmentUrl = '/video/VivaLaVida_dashinit.mp4';
let videoMimeTypeCodecs = 'video/mp4;codecs="avc1.4D401F,mp4a.40.2"';
let initRange = {start: 0, end: 1436};
let sidxRange = {start: 1437, end: 1900};
new dash('#vid1',segmentUrl,videoMimeTypeCodecs,initRange,sidxRange);
- clone the code to your local environment
git clone https://github.com/SomiFrame/somi-dashjs.git
- or
git clone [email protected]:SomiFrame/somi-dashjs.git
- enter directory which you just cloned
cd somi-dashjs
- install the devDependencies
npm install
- compile the source file to public directory
gulp
- start a node server and listen the port 3031
node server.js
-
now you can open a browser and enter URL like below
localhost:3031