-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
97 lines (94 loc) · 16.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<html><head>
<link href="https://vjs.zencdn.net/6.2.7/video-js.css" rel="stylesheet">
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script src="https://vjs.zencdn.net/6.2.7/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webtorrent/0.98.20/webtorrent.min.js"></script>
<script src="branding.js"></script>
<style>/*!
* videojs-iplayer-skin-1
* A Video.JS skin modelled on the new iPlayer theme.
*
* @author Vijay Dubb
* @version 1.0.0
* Copyright 2017. MIT licensed.
*/
.vjs-branding-logo{background:url(https://i.imgur.com/ypHWqmE.png) center center / 100% no-repeat}.video-js .vjs-loading-spinner,.vjs-default-skin .vjs-loading-spinner{border-color:#bb1919}.video-js .vjs-loading-spinner:before,.video-js .vjs-loading-spinner:after,.vjs-default-skin .vjs-loading-spinner:before,.vjs-default-skin .vjs-loading-spinner:after{border-color:#bb1919}.video-js.vjs-paused .vjs-tech,.video-js.vjs-paused .vjs-big-play-button,.vjs-default-skin.vjs-paused .vjs-tech,.vjs-default-skin.vjs-paused .vjs-big-play-button{z-index:2}.video-js.vjs-paused .vjs-control-bar,.vjs-default-skin.vjs-paused .vjs-control-bar{z-index:-1}.video-js.vjs-has-started .vjs-tech,.video-js.vjs-has-started .vjs-big-play-button,.vjs-default-skin.vjs-has-started .vjs-tech,.vjs-default-skin.vjs-has-started .vjs-big-play-button{z-index:0}.video-js.vjs-has-started .vjs-control-bar,.vjs-default-skin.vjs-has-started .vjs-control-bar{z-index:2}.video-js .vjs-menu,.vjs-default-skin .vjs-menu{bottom:14px}.video-js .vjs-big-play-button,.vjs-default-skin .vjs-big-play-button{background-color:rgba(0,0,0,0.5);position:absolute;margin:0;border-radius:0;border:0;width:85px;height:85px;bottom:0;left:0;top:auto;box-shadow:none;transition:background-color .5s ease}.video-js .vjs-big-play-button .vjs-icon-placeholder:hover,.video-js .vjs-big-play-button .vjs-icon-placeholder:focus,.vjs-default-skin .vjs-big-play-button .vjs-icon-placeholder:hover,.vjs-default-skin .vjs-big-play-button .vjs-icon-placeholder:focus{background-color:#bb1919}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.vjs-default-skin .vjs-big-play-button .vjs-icon-placeholder:before{font-size:60px;height:auto;padding:0;margin:0;line-height:85px}.video-js:hover .vjs-big-play-button,.video-js:hover .vjs-big-play-button:focus,.video-js:focus .vjs-big-play-button,.video-js:focus .vjs-big-play-button:focus,.vjs-default-skin:hover .vjs-big-play-button,.vjs-default-skin:hover .vjs-big-play-button:focus,.vjs-default-skin:focus .vjs-big-play-button,.vjs-default-skin:focus .vjs-big-play-button:focus{border-color:transparent;box-shadow:none;background-color:#bb1919}.video-js .vjs-load-progress,.vjs-default-skin .vjs-load-progress{background:#e0e0e0}.video-js .vjs-progress-holder .vjs-play-progress,.video-js .vjs-progress-holder .vjs-load-progress,.video-js .vjs-progress-holder .vjs-load-progress div,.vjs-default-skin .vjs-progress-holder .vjs-play-progress,.vjs-default-skin .vjs-progress-holder .vjs-load-progress,.vjs-default-skin .vjs-progress-holder .vjs-load-progress div{height:6px;line-height:44px}.video-js .vjs-volume-level,.video-js .vjs-play-progress,.vjs-default-skin .vjs-volume-level,.vjs-default-skin .vjs-play-progress{background-color:#bb1919}.video-js .vjs-volume-level:before,.video-js .vjs-play-progress:before,.vjs-default-skin .vjs-volume-level:before,.vjs-default-skin .vjs-play-progress:before{right:-8px;font-size:.9em;height:14px;width:9px;background:#fff;padding:0;margin:0;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);content:''}.video-js .vjs-control-bar,.vjs-default-skin .vjs-control-bar{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-justify-content:flex-end;justify-content:flex-end;height:120px;background:-moz-linear-gradient(top,rgba(255,255,255,0) 0,rgba(0,0,0,0.39) 39%,rgba(0,0,0,0.39) 39%,black 100%);background:-webkit-gradient(left top,left bottom,color-stop(0%,rgba(255,255,255,0)),color-stop(39%,rgba(0,0,0,0.39)),color-stop(39%,rgba(0,0,0,0.39)),color-stop(100%,black));background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0,rgba(0,0,0,0.39) 39%,rgba(0,0,0,0.39) 39%,black 100%);background:-o-linear-gradient(top,rgba(255,255,255,0) 0,rgba(0,0,0,0.39) 39%,rgba(0,0,0,0.39) 39%,black 100%);background:-ms-linear-gradient(top,rgba(255,255,255,0) 0,rgba(0,0,0,0.39) 39%,rgba(0,0,0,0.39) 39%,black 100%);background:linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(0,0,0,0.39) 39%,rgba(0,0,0,0.39) 39%,black 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#000000',GradientType=0)}.video-js .vjs-icon-placeholder:before,.vjs-default-skin .vjs-icon-placeholder:before{font-size:25px;height:auto;padding:0;margin:0;line-height:44px;width:44px}.video-js .vjs-icon-placeholder:focus:before,.video-js .vjs-icon-placeholder:hover:before,.vjs-default-skin .vjs-icon-placeholder:focus:before,.vjs-default-skin .vjs-icon-placeholder:hover:before{box-shadow:none;text-shadow:none}.video-js .vjs-live-control,.vjs-default-skin .vjs-live-control{top:-34px;left:0;right:0;margin:auto;position:absolute}.video-js .vjs-current-time,.video-js .vjs-remaining-time,.vjs-default-skin .vjs-current-time,.vjs-default-skin .vjs-remaining-time{right:82px}.video-js .vjs-duration,.vjs-default-skin .vjs-duration{right:50px}.video-js .vjs-time-divider,.vjs-default-skin .vjs-time-divider{right:75px}.video-js .vjs-playback-rate .vjs-menu,.vjs-default-skin .vjs-playback-rate .vjs-menu{width:44px;bottom:14px}.video-js .vjs-playback-rate .vjs-playback-rate-value,.vjs-default-skin .vjs-playback-rate .vjs-playback-rate-value{line-height:44px}.video-js .vjs-current-time,.video-js .vjs-duration,.video-js .vjs-time-divider,.vjs-default-skin .vjs-current-time,.vjs-default-skin .vjs-duration,.vjs-default-skin .vjs-time-divider{position:absolute;height:44px;display:block;bottom:0}.video-js .vjs-current-time>div,.video-js .vjs-duration>div,.video-js .vjs-time-divider>div,.vjs-default-skin .vjs-current-time>div,.vjs-default-skin .vjs-duration>div,.vjs-default-skin .vjs-time-divider>div{line-height:44px;height:44px}.video-js .vjs-remaining-time,.vjs-default-skin .vjs-remaining-time{display:none}.video-js .vjs-control,.vjs-default-skin .vjs-control{width:44px;height:44px;transition:background-color .5s ease;bottom:0}.video-js .vjs-control.vjs-fullscreen-control,.video-js .vjs-control.vjs-subs-caps-button,.video-js .vjs-control.vjs-playback-rate,.video-js .vjs-control.vjs-captions-button,.video-js .vjs-control.vjs-chapters-button,.video-js .vjs-control.vjs-volume-menu-button,.video-js .vjs-control.vjs-quality-button,.video-js .vjs-control.vjs-descriptions-button,.video-js .vjs-control.vjs-audio-button,.vjs-default-skin .vjs-control.vjs-fullscreen-control,.vjs-default-skin .vjs-control.vjs-subs-caps-button,.vjs-default-skin .vjs-control.vjs-playback-rate,.vjs-default-skin .vjs-control.vjs-captions-button,.vjs-default-skin .vjs-control.vjs-chapters-button,.vjs-default-skin .vjs-control.vjs-volume-menu-button,.vjs-default-skin .vjs-control.vjs-quality-button,.vjs-default-skin .vjs-control.vjs-descriptions-button,.vjs-default-skin .vjs-control.vjs-audio-button{width:44px;height:44px;transition:background-color .5s ease;bottom:-76px;position:relative}.video-js .vjs-control:hover,.video-js .vjs-control:focus,.vjs-default-skin .vjs-control:hover,.vjs-default-skin .vjs-control:focus{background-color:#bb1919}.video-js .vjs-progress-control,.vjs-default-skin .vjs-progress-control{bottom:40px;width:100%;position:absolute}.video-js .vjs-progress-control .vjs-slider,.vjs-default-skin .vjs-progress-control .vjs-slider{height:6px;margin:0 10px}.video-js .vjs-progress-control .vjs-slider-handle,.vjs-default-skin .vjs-progress-control .vjs-slider-handle{top:40%}.video-js .vjs-progress-control:hover,.video-js .vjs-progress-control:focus,.video-js .vjs-current-time:hover,.video-js .vjs-current-time:focus,.video-js .vjs-duration:hover,.video-js .vjs-duration:focus,.video-js .vjs-time-divider:hover,.video-js .vjs-time-divider:focus,.video-js .vjs-volume-control:hover,.video-js .vjs-volume-control:focus,.video-js .vjs-close-button:hover,.video-js .vjs-close-button:focus,.video-js .vjs-live-control:hover,.video-js .vjs-live-control:focus,.vjs-default-skin .vjs-progress-control:hover,.vjs-default-skin .vjs-progress-control:focus,.vjs-default-skin .vjs-current-time:hover,.vjs-default-skin .vjs-current-time:focus,.vjs-default-skin .vjs-duration:hover,.vjs-default-skin .vjs-duration:focus,.vjs-default-skin .vjs-time-divider:hover,.vjs-default-skin .vjs-time-divider:focus,.vjs-default-skin .vjs-volume-control:hover,.vjs-default-skin .vjs-volume-control:focus,.vjs-default-skin .vjs-close-button:hover,.vjs-default-skin .vjs-close-button:focus,.vjs-default-skin .vjs-live-control:hover,.vjs-default-skin .vjs-live-control:focus{background-color:transparent}.video-js .vjs-play-control,.vjs-default-skin .vjs-play-control{position:absolute;left:0}.video-js .vjs-fullscreen-control,.vjs-default-skin .vjs-fullscreen-control{right:0;position:absolute}.video-js .vjs-volume-menu-button,.video-js .vjs-volume-panel,.vjs-default-skin .vjs-volume-menu-button,.vjs-default-skin .vjs-volume-panel{position:absolute;left:44px}.video-js .vjs-volume-menu-button:hover,.video-js .vjs-volume-menu-button:focus,.video-js .vjs-volume-panel:hover,.video-js .vjs-volume-panel:focus,.vjs-default-skin .vjs-volume-menu-button:hover,.vjs-default-skin .vjs-volume-menu-button:focus,.vjs-default-skin .vjs-volume-panel:hover,.vjs-default-skin .vjs-volume-panel:focus{background-color:transparent}.video-js .vjs-volume-menu-button:hover:before,.video-js .vjs-volume-menu-button:focus:before,.video-js .vjs-volume-panel:hover:before,.video-js .vjs-volume-panel:focus:before,.vjs-default-skin .vjs-volume-menu-button:hover:before,.vjs-default-skin .vjs-volume-menu-button:focus:before,.vjs-default-skin .vjs-volume-panel:hover:before,.vjs-default-skin .vjs-volume-panel:focus:before{background-color:#bb1919}.video-js .vjs-volume-menu-button:before,.video-js .vjs-volume-panel:before,.vjs-default-skin .vjs-volume-menu-button:before,.vjs-default-skin .vjs-volume-panel:before{width:44px;left:0;top:50%;-webkit-transform:translate(0%,-50%);-ms-transform:translate(0%,-50%);transform:translate(0%,-50%)}.video-js .vjs-volume-bar,.video-js .vjs-volume-level,.vjs-default-skin .vjs-volume-bar,.vjs-default-skin .vjs-volume-level{height:6px}.video-js .vjs-volume-bar,.vjs-default-skin .vjs-volume-bar{top:24%;margin:0;left:4px;width:80px}.video-js .vjs-seek-handle,.vjs-default-skin .vjs-seek-handle{height:auto}.video-js .vjs-slider-handle:before,.video-js .vjs-volume-bar .vjs-volume-handle:before,.vjs-default-skin .vjs-slider-handle:before,.vjs-default-skin .vjs-volume-bar .vjs-volume-handle:before{width:10px;height:16px;background-color:#fff;position:absolute;right:0;top:-5px;-webkit-transform:none;-ms-transform:none;transform:none;content:"";font-family:none}.video-js .vjs-live-controls,.vjs-default-skin .vjs-live-controls{display:none}.video-js .vjs-menu-button-inline:hover,.video-js .vjs-menu-button-inline:focus,.video-js .vjs-menu-button-inline.vjs-slider-active,.vjs-default-skin .vjs-menu-button-inline:hover,.vjs-default-skin .vjs-menu-button-inline:focus,.vjs-default-skin .vjs-menu-button-inline.vjs-slider-active{width:14em}.video-js .vjs-menu-button-inline .vjs-menu,.vjs-default-skin .vjs-menu-button-inline .vjs-menu{left:97px}.video-js .vjs-menu-button-inline .vjs-menu .vjs-menu-content,.vjs-default-skin .vjs-menu-button-inline .vjs-menu .vjs-menu-content{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);overflow:visible;height:auto;width:8em}.video-js.vjs-no-flex .vjs-menu-button-inline,.vjs-default-skin.vjs-no-flex .vjs-menu-button-inline{width:14em}.video-js .vjs-time-tooltip,.vjs-default-skin .vjs-time-tooltip{line-height:10px;left:15px}.video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal{top:24%;margin:0;left:4px;width:80px}.video-js .vjs-volume-panel .vjs-volume-control,.vjs-default-skin .vjs-volume-panel .vjs-volume-control{top:24%;margin:0;left:4px;width:0}.video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-horizontal{top:24%;margin:0;left:4px;width:80px}.video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control.vjs-volume-horizontal{top:24%;margin:0;left:4px;width:80px}.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal,.vjs-default-skin .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal{top:24%;margin:0;left:4px;width:80px}
</style>
</head>
<body style='margin:0'>
<script>
player = null
itLoaded = false
steem.api.setOptions({ url: 'wss://steemd.privex.io' });
var path=window.location.href.split("#!/")[1];
var autoplay = path.split("/")[2]
var nobranding = path.split("/")[3]
var videoGateway = path.split("/")[4]
var snapGateway = path.split("/")[5]
// use ipfs.io as default gateway
if (!videoGateway) videoGateway = 'ipfs.io'
if (!snapGateway) snapGateway = 'ipfs.io'
steem.api.getContent(path.split("/")[0], path.split("/")[1], function(d,b){
var a=JSON.parse(b.json_metadata).video;
var posterUrl="https://"+snapGateway+"/ipfs/"+a.info.snaphash;
createPlayer("https://"+videoGateway+"/ipfs/"+a.content.videohash, posterUrl, autoplay, nobranding)
// if there's a magnet link, start torrent in background
if (a.content.magnet) {
var Torrent = new WebTorrent()
Torrent.add(a.content.magnet, function (torrent) {
// and switch when torrent is ready and downloading at fair speed!
torrent.on('download', function (bytes) {
console.log('download speed: ' + torrent.downloadSpeed)
console.log('progress: ' + torrent.progress)
if (!itLoaded && torrent.downloadSpeed > a.info.filesize/a.info.duration) {
itLoaded = true
var file = torrent.files[0]
var container = document.getElementsByTagName('video')[0]
file.renderTo(container)
}
})
})
}
});
function createPlayer(videoUrl, posterUrl, autoplay, branding) {
var c=document.createElement("video");
c.src=videoUrl;
c.poster=posterUrl;
c.controls=true;
c.autoplay=autoplay;
c.id="player";
c.className="video-js";
c.style="width:100%;height:100%";
c.addEventListener('loadeddata', function() {
if(c.readyState >= 3) {
itLoaded = true
}
});
document.body.appendChild(c);
player=videojs("player",{
sourceOrder:true,
sources:[
{src:videoUrl,type:"video/mp4"}
],
techOrder:["html5"],
playbackRates:[0.25,0.5,0.75,1,1.25,1.5,2],
controlBar:{
currentTimeDisplay:false,
timeDivider:false,
durationDisplay:false
}
});
if (!nobranding)
player.brand({
image:"http://i.imgur.com/zq4SRTK.png",
title:"Watch on DTube",
destination:"http://dtube.video/#!/v/"+path.split("/")[0]+'/'+path.split("/")[1],destinationTarget:"_blank"
})
}
function removePlayer() {
var elem = document.getElementById('player');
return elem.parentNode.removeChild(elem);
}
</script>
</body>
</html>