Skip to content

a simple one track and onDemand video dash player

Notifications You must be signed in to change notification settings

SomiFrame/somi-dashjs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Somi-dashjs

A small library that Video tag use MediaSource Extension to Load video stream.

online demo https://somiframe.github.io/vue-video/

Installation

    npm install somi-dashjs

How to create a onDemand dash video?

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>

Usage

    // 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);

Tests

First

  • 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

Second

  • 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

Third

  • now you can open a browser and enter URL like below

    localhost:3031

About

a simple one track and onDemand video dash player

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages