%PDF- %PDF-
| Direktori : /data/archive/Other/ |
| Current File : //data/archive/Other/dash.html |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>DASH.js JW Player Provider</title>
<script src="http://demo.jwplayer.com/dash-js/dash/dash.all.js"></script>
<script src="http://demo.jwplayer.com/dash-js/jwplayer/jwplayer.js"></script>
<script src="http://demo.jwplayer.com/dash-js/providers/html5.provider.dash.js"></script>
<style>
body {
margin: 10px auto;
width: 640px;
font: 14px/20px Helvetica, sans-serif;
}
#container {
line-height: 40px;
color: #CCC;
text-align: center;
background: #000;
display: block;
height: 320px;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
#container a {
color: #128DEB;
border-bottom: 1px dotted #128DEB;
text-decoration: none;
}
#container a:hover {
color: #FFF;
border-bottom: 1px dotted #FFF;
}
form {
margin: 10px 0 0 0;
position: relative;
padding: 0;
}
select, input, button {
border: 0;
border-radius: 3px;
display: inline-block;
margin: 0;
line-height: 14px;
background: #EEE;
color: #CCC;
}
select {
width: 140px;
position: absolute;
left: 5px;
top: 5px;
padding: 0;
background: #128DEB;
}
input {
width: 406px;
padding: 5px 5px 5px 150px;
color: #333;
border: 1px solid #CCC;
}
button {
width: 72px;
background: #128DEB;
padding: 6px;
cursor: pointer;
}
button:hover {
color: #FFF;
}
input:focus, button:focus,select:focus {
outline: none;
}
</style>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-42148455-1', 'jwplayer.com');
ga('send', 'pageview');
</script>
</head>
<body>
<div id='container'>
You need a <a href="http://www.jwplayer.com/html5/mediasource/">browser with Media Source Extensions</a> for this demo.
</div>
<form>
<select>
<option value="">Load MPD...</option>
<option value="http://samplescdn.origin.mediaservices.windows.net/e0e820ec-f6a2-4ea2-afe3-1eed4e06ab2c/AzureMediaServices_Overview.ism/manifest(format=mpd-time-csf)">Azure VOD</option>
<option value="http://dash.edgesuite.net/envivio/dashpr/clear/Manifest.mpd">Akamai VOD</option>
<!-- <option value="http://demo.unified-streaming.com/video/oceans/oceans.ism/oceans.mpd">USP VOD</option> -->
<option value="http://wowzaec2demo.streamlock.net/vod/smil:bigbuckbunny.smil/manifest.mpd">Wowza VOD</option>
<option value="http://54.201.151.65/livesim/tfdt_32/testpic_2s/Manifest.mpd">EBU Live</option>
<!-- <option value="http://live.unified-streaming.com/loop/loop.isml/loop.mpd">USP Live</option> -->
<!-- <option value="http://wowza.jwplayer.com:1935/live/jelly.stream/manifest.mpd">Wowza Live</option> -->
</select>
<input type="text" value="https://video.varak.net/videos/Other/dash/manifest.mpd">
<button type="submit">Go</button>
</form>
<script>
jwplayer.key = 'LJu3LqXr6x1yi4MI'
function loadMPD(a) {
var o = {
file: 'dummy.mpd',
autostart: a,
fallback: false,
width: 640,
height: 320
}
var f = document.querySelector("input").value;
if(f) o.file = f;
jwplayer('container').setup(o);
};
document.querySelector("select").addEventListener("change",function(e){
if(this.value) {
document.querySelector("input").value = this.value;
loadMPD(true);
this.value = "";
}
},false);
document.querySelector("form").addEventListener("submit",function(e){
e.preventDefault();
loadMPD(true);
},false);
loadMPD(false);
</script>
<script>
var hasPlayed = false;
jwplayer().onBeforePlay(function(event) {
if(hasPlayed == false){
ga('send', 'event', 'Video', 'Play');
hasPlayed = true;
}
});
</script>
</body>
</html>