2018-07-14 13:36:31 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<meta name="thumbnail" content="<%= thumbnail %>">
|
2018-08-09 20:58:44 +00:00
|
|
|
<link rel="stylesheet" href="https://unpkg.com/video.js@6.12.0/dist/video-js.min.css">
|
2018-07-14 13:36:31 +00:00
|
|
|
<link rel="stylesheet" href="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/css/quality-selector.css">
|
2018-07-31 18:19:38 +00:00
|
|
|
<link rel="stylesheet" href="https://unpkg.com/videojs-markers@1.0.1/dist/videojs.markers.min.css">
|
2018-07-31 18:40:26 +00:00
|
|
|
<link rel="stylesheet" href="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.css">
|
2018-08-09 20:58:44 +00:00
|
|
|
<script src="https://unpkg.com/video.js@6.12.0/dist/video.min.js"></script>
|
|
|
|
|
<script src="https://unpkg.com/videojs-hotkeys@0.2.22/build/videojs.hotkeys.min.js"></script>
|
2018-07-14 13:36:31 +00:00
|
|
|
<script src="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/js/silvermine-videojs-quality-selector.min.js"></script>
|
2018-07-31 18:19:38 +00:00
|
|
|
<script src="https://unpkg.com/videojs-markers@1.0.1/dist/videojs-markers.min.js"></script>
|
2018-07-31 18:40:26 +00:00
|
|
|
<script src="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.min.js"></script>
|
2018-08-04 00:20:40 +00:00
|
|
|
<link rel="stylesheet" href="/css/default.css">
|
2018-08-01 21:07:47 +00:00
|
|
|
<title><%= HTML.escape(video.title) %> - Invidious</title>
|
2018-07-14 13:36:31 +00:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<style>
|
|
|
|
|
video, #my_video, .video-js, .vjs-default-skin
|
|
|
|
|
{
|
|
|
|
|
position: fixed;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
min-width: 100%;
|
|
|
|
|
min-height: 100%;
|
|
|
|
|
width: auto;
|
|
|
|
|
height: auto;
|
|
|
|
|
z-index: -100;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
2018-07-31 18:19:38 +00:00
|
|
|
<% if hlsvp %>
|
|
|
|
|
<script src="https://unpkg.com/videojs-contrib-hls@5.14.1/dist/videojs-contrib-hls.min.js"></script>
|
|
|
|
|
<% end %>
|
|
|
|
|
|
2018-07-19 15:30:54 +00:00
|
|
|
<video playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>" id="player"
|
2018-07-31 18:19:38 +00:00
|
|
|
<% if autoplay %>autoplay<% end %>
|
|
|
|
|
<% if controls %>controls<% end %>
|
|
|
|
|
<% if video_loop %>loop<% end %>
|
2018-07-19 15:30:54 +00:00
|
|
|
class="video-js vjs-default-skin">
|
2018-07-31 18:19:38 +00:00
|
|
|
<% if hlsvp %>
|
|
|
|
|
<source src="<%= hlsvp %>" type="application/x-mpegURL">
|
2018-07-14 13:36:31 +00:00
|
|
|
<% else %>
|
2018-07-31 18:19:38 +00:00
|
|
|
<% if listen %>
|
|
|
|
|
<% audio_streams.each_with_index do |fmt, i| %>
|
|
|
|
|
<source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["bitrate"] %>k" selected="<%= i == 0 ? true : false %>">
|
2018-07-19 16:04:29 +00:00
|
|
|
<% end %>
|
2018-07-31 18:19:38 +00:00
|
|
|
<% else %>
|
|
|
|
|
<% fmt_stream.each_with_index do |fmt, i| %>
|
2018-08-04 22:55:27 +00:00
|
|
|
<source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= quality == fmt["label"].split(" - ")[0] %>">
|
|
|
|
|
<% end %>
|
2018-08-06 22:10:22 +00:00
|
|
|
<% end %>
|
|
|
|
|
|
|
|
|
|
<% captions.each do |caption| %>
|
2018-08-06 23:25:25 +00:00
|
|
|
<track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption.name.simpleText %>"
|
|
|
|
|
label="<%= caption.name.simpleText %> ">
|
2018-07-31 18:19:38 +00:00
|
|
|
<% end %>
|
2018-07-14 13:36:31 +00:00
|
|
|
<% end %>
|
|
|
|
|
</video>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
var options = {
|
2018-08-06 22:18:50 +00:00
|
|
|
<% if autoplay %>
|
2018-08-09 21:01:39 +00:00
|
|
|
preload: "auto",
|
2018-08-06 22:18:50 +00:00
|
|
|
<% end %>
|
2018-08-05 13:58:03 +00:00
|
|
|
playbackRates: [0.5, 1, 1.5, 2],
|
|
|
|
|
controlBar: {
|
|
|
|
|
children: [
|
2018-08-09 21:01:39 +00:00
|
|
|
"playToggle",
|
|
|
|
|
"volumePanel",
|
|
|
|
|
"currentTimeDisplay",
|
|
|
|
|
"timeDivider",
|
|
|
|
|
"durationDisplay",
|
|
|
|
|
"progressControl",
|
|
|
|
|
"remainingTimeDisplay",
|
|
|
|
|
"captionsButton",
|
|
|
|
|
"qualitySelector",
|
|
|
|
|
"playbackRateMenuButton",
|
|
|
|
|
"fullscreenToggle"
|
2018-08-05 13:58:03 +00:00
|
|
|
]
|
|
|
|
|
}
|
2018-07-14 13:36:31 +00:00
|
|
|
};
|
2018-07-31 18:19:38 +00:00
|
|
|
|
2018-07-31 18:40:26 +00:00
|
|
|
var shareOptions = {
|
|
|
|
|
socials: ["fb", "tw", "reddit", "mail"],
|
|
|
|
|
|
|
|
|
|
url: "<%= host_url %>/<%= video.id %>?<%= host_params %>",
|
2018-08-01 21:17:34 +00:00
|
|
|
title: "<%= video.title.dump_unquoted %>",
|
2018-07-31 18:40:26 +00:00
|
|
|
description: "<%= description %>",
|
2018-08-09 21:01:39 +00:00
|
|
|
image: "<%= thumbnail %>",
|
2018-08-01 15:45:45 +00:00
|
|
|
embedCode: `<iframe id='ivplayer' type='text/html' width='640' height='360'
|
2018-08-05 13:58:03 +00:00
|
|
|
src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>`
|
2018-07-31 18:40:26 +00:00
|
|
|
};
|
|
|
|
|
|
2018-08-09 21:01:39 +00:00
|
|
|
var player = videojs("player", options, function() {
|
2018-08-04 00:51:29 +00:00
|
|
|
this.hotkeys({
|
2018-07-14 13:36:31 +00:00
|
|
|
volumeStep: 0.1,
|
|
|
|
|
seekStep: 5,
|
|
|
|
|
enableModifiersForNumbers: false,
|
|
|
|
|
customKeys: {
|
|
|
|
|
play: {
|
|
|
|
|
key: function(e) {
|
|
|
|
|
// Toggle play with K Key
|
2018-08-09 21:01:39 +00:00
|
|
|
return e.which === 75;
|
2018-07-14 13:36:31 +00:00
|
|
|
},
|
|
|
|
|
handler: function(player, options, e) {
|
|
|
|
|
if (player.paused()) {
|
|
|
|
|
player.play();
|
|
|
|
|
} else {
|
|
|
|
|
player.pause();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
backward: {
|
|
|
|
|
key: function(e) {
|
|
|
|
|
// Go backward 5 seconds
|
2018-08-09 21:01:39 +00:00
|
|
|
return e.which === 74;
|
2018-07-14 13:36:31 +00:00
|
|
|
},
|
|
|
|
|
handler: function(player, options, e) {
|
|
|
|
|
player.currentTime(player.currentTime() - 5);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
forward: {
|
|
|
|
|
key: function(e) {
|
|
|
|
|
// Go forward 5 seconds
|
2018-08-09 21:01:39 +00:00
|
|
|
return e.which === 76;
|
2018-07-14 13:36:31 +00:00
|
|
|
},
|
|
|
|
|
handler: function(player, options, e) {
|
|
|
|
|
player.currentTime(player.currentTime() + 5);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
2018-08-05 12:38:43 +00:00
|
|
|
});
|
2018-07-14 13:36:31 +00:00
|
|
|
|
2018-08-05 12:38:43 +00:00
|
|
|
player.share(shareOptions);
|
2018-07-31 18:40:26 +00:00
|
|
|
|
2018-08-05 12:38:43 +00:00
|
|
|
<% if video_start > 0 || video_end > 0 %>
|
|
|
|
|
player.markers({
|
|
|
|
|
onMarkerReached: function(marker) {
|
2018-08-09 21:01:39 +00:00
|
|
|
if (marker.text === "End") {
|
2018-08-05 12:38:43 +00:00
|
|
|
if (player.loop()) {
|
2018-08-09 21:01:39 +00:00
|
|
|
player.markers.prev("Start");
|
2018-08-05 12:38:43 +00:00
|
|
|
} else {
|
|
|
|
|
player.pause();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
markers: [
|
2018-08-09 21:01:39 +00:00
|
|
|
{ time: <%= video_start %>, text: "Start" },
|
2018-08-05 12:38:43 +00:00
|
|
|
<% if video_end < 0 %>
|
2018-08-09 21:01:39 +00:00
|
|
|
{ time: <%= video.info["length_seconds"].to_f - 0.5 %>, text: "End" }
|
2018-08-05 12:38:43 +00:00
|
|
|
<% else %>
|
2018-08-09 21:01:39 +00:00
|
|
|
{ time: <%= video_end %>, text: "End" }
|
2018-08-05 12:38:43 +00:00
|
|
|
<% end %>
|
|
|
|
|
]
|
|
|
|
|
});
|
2018-07-14 13:36:31 +00:00
|
|
|
|
2018-08-05 12:38:43 +00:00
|
|
|
player.currentTime(<%= video_start %>);
|
|
|
|
|
<% end %>
|
2018-07-31 18:19:38 +00:00
|
|
|
|
2018-08-05 12:38:43 +00:00
|
|
|
<% if !listen %>
|
|
|
|
|
var currentSources = player.currentSources();
|
2018-08-09 21:01:39 +00:00
|
|
|
for (var i = 0; i < currentSources.length; i++) {
|
|
|
|
|
if (player.canPlayType(currentSources[i]["type"].split(";")[0]) === "") {
|
2018-08-05 12:38:43 +00:00
|
|
|
currentSources.splice(i);
|
|
|
|
|
i--;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
player.src(currentSources);
|
|
|
|
|
<% end %>
|
2018-07-14 13:36:31 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
