H.264, H.265 WebH.265Web Assembly(FFmpeg)JSCanvasAudioContextWebH265

Chrome>57 Safari (>11) Firefox (>52)

# 
* mkdir goldvideo
* cd goldvideo
# h265player, h265player
* git clone https://github.com/goldvideo/h265player.git
* cd h265player
# 
* npm install

# 
* npm run dev    # 
* npm run test   # 
* npm run build  # 
* rollup -c      # csjesm

Nginx(Server)

server {
    listen       8000;
    location / {
        root   <path of goldvideo>/goldvideo;
        index  index.html index.htm;
        autoindex on;
    }
}

nginxdemo http://localhost:8000/h265player/demo/demo.html

NPMexample[]

# npmDEMO
* npm i goldvideo-player

goldvideo example

demuxer[]

demuxer npm (https://www.npmjs.com/package/demuxer)

* cd goldvideo
* git clone https://github.com/goldvideo/demuxer.git
* cd demuxer
* npm install
# demuxerpackage.json
* npm install --global rollup
# demuxer
* rollup -c ./rollup.config.js --environment BUILD_MODE:production
* cd h265player
# demuxer
* npm install ../demuxer

WASM[]

decoder_wasm h265player/dist/lib/libffmpeg.jslibffmpeg.wasm

# decoder_wasm
* cd goldvideo
* git clone http://github.com/goldvideo/decoder_wasm.git
* cd decoder_wasm

wasmREADME

goldvideo
  demuxer
  h265player
  decoder_wasm
  example

UILoader3

UIscreencontrolbarscreencontrolbar
LoaderHLSworkertststsHls Loadertsts
H265demuxe.jsH265ffmpegwasmcpu
ImagePlayeryuvcanvasAudioPlayerAACptsptspts

JSH265AACdemuxerhttps://github.com/goldvideo/demuxer

ffmpegH265ffmpegffmpegwasmffmpegwasmdecoder_wasm

ImagePlayer

yuv-canvasYUVImagePlayerYUVyuvreadybufferLengthImagePlayerReadyreadyH265dataReadyplay

AudioPlayer

Web Audio API

Audio PlayerWeb Audio API, AACPCM

Audio PlayerAACAudioContextdecodeAudioData APIPCM
AudioNodeWeb Audio APIWeb Audio APIaudioContext.destination
- ScriptProcessorNodeWeb Audio APIAudioBufferSourceNode MediaElementAudioSourceNodeScriptProcessorNode onaudioprocess
- GainNode

Audio ContextplaybackRatepitch/ SoundTouchJSScriptProcessorNode

head

<link rel="stylesheet" href="../dist/goldplay-h265.css">
<script src="../dist/goldplay-h265-sdk.js"></script>
<style>
    .play-container {
        width: 800px;
        height: 500px;
    }
</style>

div

<div class="play-container"></div>

GoldPlay

//
let el = doc.querySelector('.play-container')
//
let options = {
    // 
    sourceURL: 'http://localhost:8000/h265player/data/video2/playlist.m3u8',
    type: 'HLS'
    // wasm
    libPath: 'http://localhost:8000/h265player/dist/lib',
}
let player = new GoldPlay(el, options}