메뉴 닫기

Shaka player 테스트

 

스트리밍 서비스   MPEG DASH ,  HLS   재생을 위한 플레이어 로  

오픈소스 자바 스크립트 라이브러리 인   Shaka player 를 사용하여 재생 테스트를 해보았습니다. 

 

 

Git hub 

https://github.com/shaka-project/shaka-player

 

 

Shakaplayer 는 MPEG DASH  와 HSL 모두   VOD, LIVE  재생을 지원한다고 합니다.  

 

git hub 에서  다운로드 하면 아래 와 같이 파일들과 데모 를 확인 할 수있습니다.

shaka player filelist
file list

 

튜토리얼 문서를 제공하고 있습니다. 

https://shaka-player-demo.appspot.com/docs/api/tutorial-welcome.html

 

player 빌드를 위해서는 아래 조건이 필요합니다.

 

    웹 브라우져에서 접속시 아래 와 같이 데모 페이지를 확인 할 수 있습니다. 

shaka player demo page

 

 

상단 메뉴중  CUSTOM Contents 를 클릭 하고 오른쪽 아래   + 버튼을 클릭하면  

직접 영상 소스의   Manifest URL 을 입력하여  저장 ,  재생 도 가능합니다 

 

 

 

 

빌드한 플레이어의  사용법 은    

https://shaka-player-demo.appspot.com/docs/api/tutorial-basic-usage.html

에서 확인 가능한 것 과 같이  

 

웹으로 접속할   html 페이지를 만들고  

<!DOCTYPE html>
<html>
<head>
<!– Shaka Player compiled library: –>
<script src=”./shaka-player/dist/shaka-player.compiled.js”></script>
<!– Your application source: –>
<script src=”myapp2.js”></script>
</head>
<body>
<video id=”video”
width=”640″
poster=”//shaka-player-demo.appspot.com/assets/poster.jpg”
controls autoplay></video>
</body>
</html>

 

 

 

위 html 페이지에서 불러올   myapp.js 를  구성하여  재생 합니다. 

 // myapp.js

const manifestUri =
‘https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd’;

function initApp() {
// Install built-in polyfills to patch browser incompatibilities.
shaka.polyfill.installAll();

// Check to see if the browser supports the basic APIs Shaka needs.
if (shaka.Player.isBrowserSupported()) {
// Everything looks good!
initPlayer();
} else {
// This browser does not have the minimum set of APIs we need.
console.error(‘Browser not supported!’);
}
}

async function initPlayer() {
// Create a Player instance.
const video = document.getElementById(‘video’);
const player = new shaka.Player(video);

// Attach player to the window to make it easy to access in the JS console.
window.player = player;

// Listen for error events.
player.addEventListener(‘error’, onErrorEvent);

// Try to load a manifest.
// This is an asynchronous process.
try {
await player.load(manifestUri);
// This runs if the asynchronous load is successful.
console.log(‘The video has now been loaded!’);
} catch (e) {
// onError is executed if the asynchronous load fails.
onError(e);
}
}

function onErrorEvent(event) {
// Extract the shaka.util.Error object from the event.
onError(event.detail);
}

function onError(error) {
// Log the error.
console.error(‘Error code’, error.code, ‘object’, error);
}

document.addEventListener(‘DOMContentLoaded’, initApp);

 

manifestUri  부분에 재생 하려는 다른 영상 소스 주소로 변경하여 확인 가능합니다 

 

 

 

웹 브라우져로 접속하면  재생 확인 가능합니다.

 

지금까지 구글에서 제공하는 player 테스트 였습니다.  

 

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x