mirror of
https://gitea.invidious.io/iv-org/invidious-copy-2022-08-14.git
synced 2024-08-15 00:53:20 +00:00
Pull 'player' out into seperate component
This commit is contained in:
Omar Roth
parent
debe5cbea9
commit
ce0e4babad
7 changed files with 207 additions and 338 deletions
|
|
@ -200,7 +200,7 @@ get "/watch" do |env|
|
|||
end
|
||||
subscriptions ||= [] of String
|
||||
|
||||
autoplay, video_loop, video_start, video_end, listen, raw, quality, autoplay = process_video_params(env.params.query, preferences)
|
||||
autoplay, video_loop, video_start, video_end, listen, raw, quality, controls = process_video_params(env.params.query, preferences)
|
||||
if listen
|
||||
env.params.query.delete_all("listen")
|
||||
end
|
||||
|
|
@ -226,6 +226,7 @@ get "/watch" do |env|
|
|||
captions = captions - preferred_captions
|
||||
end
|
||||
preferred_captions ||= [] of Caption
|
||||
aspect_ratio = "16:9"
|
||||
|
||||
video.description = fill_links(video.description, "https", "www.youtube.com")
|
||||
video.description = add_alt_links(video.description)
|
||||
|
|
@ -316,7 +317,21 @@ get "/embed/:id" do |env|
|
|||
next env.redirect url
|
||||
end
|
||||
|
||||
autoplay, video_loop, video_start, video_end, listen, raw, quality, autoplay, controls = process_video_params(env.params.query, nil)
|
||||
autoplay, video_loop, video_start, video_end, listen, raw, quality, controls = process_video_params(env.params.query, nil)
|
||||
preferred_captions = [] of Caption
|
||||
preferences = Preferences.from_json({
|
||||
"video_loop" => video_loop,
|
||||
"autoplay" => autoplay,
|
||||
"speed" => 1.0,
|
||||
"quality" => quality,
|
||||
"volume" => 100,
|
||||
"max_results" => 0,
|
||||
"sort" => "",
|
||||
"latest_only" => false,
|
||||
"unseen_only" => false,
|
||||
"dark_mode" => false,
|
||||
}.to_json)
|
||||
aspect_ratio = nil
|
||||
|
||||
begin
|
||||
video = get_video(id, PG_DB)
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ macro add_mapping(mapping)
|
|||
DB.mapping({{mapping}})
|
||||
end
|
||||
|
||||
macro templated(filename)
|
||||
render "src/invidious/views/#{{{filename}}}.ecr", "src/invidious/views/layout.ecr"
|
||||
macro templated(filename, template = "layout")
|
||||
render "src/invidious/views/#{{{filename}}}.ecr", "src/invidious/views/#{{{template}}}.ecr"
|
||||
end
|
||||
|
||||
macro rendered(filename)
|
||||
|
|
|
|||
|
|
@ -475,7 +475,7 @@ def process_video_params(query, preferences)
|
|||
controls ||= 1
|
||||
controls = controls == 1
|
||||
|
||||
return autoplay, video_loop, video_start, video_end, listen, raw, quality, autoplay, controls
|
||||
return autoplay, video_loop, video_start, video_end, listen, raw, quality, controls
|
||||
end
|
||||
|
||||
def generate_thumbnails(json, id)
|
||||
|
|
|
|||
153
src/invidious/views/components/player.ecr
Normal file
153
src/invidious/views/components/player.ecr
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
<video style="width:100%" playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>"
|
||||
id="player" class="video-js"
|
||||
<% if autoplay %>autoplay<% end %>
|
||||
<% if video_loop %>loop<% end %>
|
||||
<% if controls %>controls<% end %>>
|
||||
<% if hlsvp %>
|
||||
<source src="<%= hlsvp %>" type="application/x-mpegURL">
|
||||
<% else %>
|
||||
<% 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 %>">
|
||||
<% end %>
|
||||
<% else %>
|
||||
<% fmt_stream.each_with_index do |fmt, i| %>
|
||||
<% if preferences %>
|
||||
<source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= preferences.quality == fmt["label"].split(" - ")[0] %>">
|
||||
<% else %>
|
||||
<source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= i == 0 ? true : false %>">
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% preferred_captions.each_with_index do |caption, i| %>
|
||||
<track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption.name.simpleText %>"
|
||||
label="<%= caption.name.simpleText %>" <% if i == 0 %>default<% end %>>
|
||||
<% end %>
|
||||
|
||||
<% captions.each do |caption| %>
|
||||
<track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption.name.simpleText %>"
|
||||
label="<%= caption.name.simpleText %>">
|
||||
<% end %>
|
||||
<% end %>
|
||||
</video>
|
||||
|
||||
<script>
|
||||
var options = {
|
||||
<% if aspect_ratio %>
|
||||
aspectRatio: "<%= aspect_ratio %>",
|
||||
<% end %>
|
||||
preload: "auto",
|
||||
playbackRates: [0.5, 1, 1.5, 2],
|
||||
controlBar: {
|
||||
children: [
|
||||
"playToggle",
|
||||
"volumePanel",
|
||||
"currentTimeDisplay",
|
||||
"timeDivider",
|
||||
"durationDisplay",
|
||||
"progressControl",
|
||||
"remainingTimeDisplay",
|
||||
"captionsButton",
|
||||
"qualitySelector",
|
||||
"playbackRateMenuButton",
|
||||
"fullscreenToggle"
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
var shareOptions = {
|
||||
socials: ["fb", "tw", "reddit", "mail"],
|
||||
|
||||
url: "<%= host_url %>/<%= video.id %>?<%= host_params %>",
|
||||
title: "<%= video.title.dump_unquoted %>",
|
||||
description: "<%= description %>",
|
||||
image: "<%= thumbnail %>",
|
||||
embedCode: `<iframe id='ivplayer' type='text/html' width='640' height='360'
|
||||
src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>`
|
||||
};
|
||||
|
||||
var player = videojs("player", options, function() {
|
||||
this.hotkeys({
|
||||
volumeStep: 0.1,
|
||||
seekStep: 5,
|
||||
enableModifiersForNumbers: false,
|
||||
customKeys: {
|
||||
play: {
|
||||
key: function(e) {
|
||||
// Toggle play with K Key
|
||||
return e.which === 75;
|
||||
},
|
||||
handler: function(player, options, e) {
|
||||
if (player.paused()) {
|
||||
player.play();
|
||||
} else {
|
||||
player.pause();
|
||||
}
|
||||
}
|
||||
},
|
||||
backward: {
|
||||
key: function(e) {
|
||||
// Go backward 5 seconds
|
||||
return e.which === 74;
|
||||
},
|
||||
handler: function(player, options, e) {
|
||||
player.currentTime(player.currentTime() - 5);
|
||||
}
|
||||
},
|
||||
forward: {
|
||||
key: function(e) {
|
||||
// Go forward 5 seconds
|
||||
return e.which === 76;
|
||||
},
|
||||
handler: function(player, options, e) {
|
||||
player.currentTime(player.currentTime() + 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
player.share(shareOptions);
|
||||
|
||||
<% if video_start > 0 || video_end > 0 %>
|
||||
player.markers({
|
||||
onMarkerReached: function(marker) {
|
||||
if (marker.text === "End") {
|
||||
if (player.loop()) {
|
||||
player.markers.prev("Start");
|
||||
} else {
|
||||
player.pause();
|
||||
}
|
||||
}
|
||||
},
|
||||
markers: [
|
||||
{ time: <%= video_start %>, text: "Start" },
|
||||
<% if video_end < 0 %>
|
||||
{ time: <%= video.info["length_seconds"].to_f - 0.5 %>, text: "End" }
|
||||
<% else %>
|
||||
{ time: <%= video_end %>, text: "End" }
|
||||
<% end %>
|
||||
]
|
||||
});
|
||||
|
||||
player.currentTime(<%= video_start %>);
|
||||
<% end %>
|
||||
|
||||
<% if !listen %>
|
||||
var currentSources = player.currentSources();
|
||||
for (var i = 0; i < currentSources.length; i++) {
|
||||
if (player.canPlayType(currentSources[i]["type"].split(";")[0]) === "") {
|
||||
currentSources.splice(i);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
|
||||
player.src(currentSources);
|
||||
<% end %>
|
||||
|
||||
<% if preferences %>
|
||||
player.volume(<%= preferences.volume.to_f / 100 %>);
|
||||
player.playbackRate(<%= preferences.speed %>);
|
||||
<% end %>
|
||||
</script>
|
||||
12
src/invidious/views/components/player_sources.ecr
Normal file
12
src/invidious/views/components/player_sources.ecr
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<link rel="stylesheet" href="https://unpkg.com/video.js@6.12.0/dist/video-js.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/css/quality-selector.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/videojs-markers@1.0.1/dist/videojs.markers.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.css">
|
||||
<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>
|
||||
<script src="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/js/silvermine-videojs-quality-selector.min.js"></script>
|
||||
<script src="https://unpkg.com/videojs-markers@1.0.1/dist/videojs-markers.min.js"></script>
|
||||
<script src="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.min.js"></script>
|
||||
<% if hlsvp %>
|
||||
<script src="https://unpkg.com/videojs-contrib-hls@5.14.1/dist/videojs-contrib-hls.min.js"></script>
|
||||
<% end %>
|
||||
|
|
@ -2,179 +2,28 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="thumbnail" content="<%= thumbnail %>">
|
||||
<link rel="stylesheet" href="https://unpkg.com/video.js@6.12.0/dist/video-js.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/css/quality-selector.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/videojs-markers@1.0.1/dist/videojs.markers.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.css">
|
||||
<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>
|
||||
<script src="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/js/silvermine-videojs-quality-selector.min.js"></script>
|
||||
<script src="https://unpkg.com/videojs-markers@1.0.1/dist/videojs-markers.min.js"></script>
|
||||
<script src="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.min.js"></script>
|
||||
<link rel="stylesheet" href="/css/default.css">
|
||||
<title><%= HTML.escape(video.title) %> - Invidious</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="thumbnail" content="<%= thumbnail %>">
|
||||
<%= rendered "components/player_sources" %>
|
||||
<link rel="stylesheet" href="/css/default.css">
|
||||
<title><%= HTML.escape(video.title) %> - Invidious</title>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<% if hlsvp %>
|
||||
<script src="https://unpkg.com/videojs-contrib-hls@5.14.1/dist/videojs-contrib-hls.min.js"></script>
|
||||
<% end %>
|
||||
|
||||
<video playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>" id="player"
|
||||
<% if autoplay %>autoplay<% end %>
|
||||
<% if controls %>controls<% end %>
|
||||
<% if video_loop %>loop<% end %>
|
||||
class="video-js vjs-default-skin">
|
||||
<% if hlsvp %>
|
||||
<source src="<%= hlsvp %>" type="application/x-mpegURL">
|
||||
<% else %>
|
||||
<% 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 %>">
|
||||
<% end %>
|
||||
<% else %>
|
||||
<% fmt_stream.each_with_index do |fmt, i| %>
|
||||
<source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= quality == fmt["label"].split(" - ")[0] %>">
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% captions.each do |caption| %>
|
||||
<track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption.name.simpleText %>"
|
||||
label="<%= caption.name.simpleText %> ">
|
||||
<% end %>
|
||||
<% end %>
|
||||
</video>
|
||||
|
||||
<script>
|
||||
var options = {
|
||||
<% if autoplay %>
|
||||
preload: "auto",
|
||||
<% end %>
|
||||
playbackRates: [0.5, 1, 1.5, 2],
|
||||
controlBar: {
|
||||
children: [
|
||||
"playToggle",
|
||||
"volumePanel",
|
||||
"currentTimeDisplay",
|
||||
"timeDivider",
|
||||
"durationDisplay",
|
||||
"progressControl",
|
||||
"remainingTimeDisplay",
|
||||
"captionsButton",
|
||||
"qualitySelector",
|
||||
"playbackRateMenuButton",
|
||||
"fullscreenToggle"
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
var shareOptions = {
|
||||
socials: ["fb", "tw", "reddit", "mail"],
|
||||
|
||||
url: "<%= host_url %>/<%= video.id %>?<%= host_params %>",
|
||||
title: "<%= video.title.dump_unquoted %>",
|
||||
description: "<%= description %>",
|
||||
image: "<%= thumbnail %>",
|
||||
embedCode: `<iframe id='ivplayer' type='text/html' width='640' height='360'
|
||||
src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>`
|
||||
};
|
||||
|
||||
var player = videojs("player", options, function() {
|
||||
this.hotkeys({
|
||||
volumeStep: 0.1,
|
||||
seekStep: 5,
|
||||
enableModifiersForNumbers: false,
|
||||
customKeys: {
|
||||
play: {
|
||||
key: function(e) {
|
||||
// Toggle play with K Key
|
||||
return e.which === 75;
|
||||
},
|
||||
handler: function(player, options, e) {
|
||||
if (player.paused()) {
|
||||
player.play();
|
||||
} else {
|
||||
player.pause();
|
||||
}
|
||||
}
|
||||
},
|
||||
backward: {
|
||||
key: function(e) {
|
||||
// Go backward 5 seconds
|
||||
return e.which === 74;
|
||||
},
|
||||
handler: function(player, options, e) {
|
||||
player.currentTime(player.currentTime() - 5);
|
||||
}
|
||||
},
|
||||
forward: {
|
||||
key: function(e) {
|
||||
// Go forward 5 seconds
|
||||
return e.which === 76;
|
||||
},
|
||||
handler: function(player, options, e) {
|
||||
player.currentTime(player.currentTime() + 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
player.share(shareOptions);
|
||||
|
||||
<% if video_start > 0 || video_end > 0 %>
|
||||
player.markers({
|
||||
onMarkerReached: function(marker) {
|
||||
if (marker.text === "End") {
|
||||
if (player.loop()) {
|
||||
player.markers.prev("Start");
|
||||
} else {
|
||||
player.pause();
|
||||
}
|
||||
}
|
||||
},
|
||||
markers: [
|
||||
{ time: <%= video_start %>, text: "Start" },
|
||||
<% if video_end < 0 %>
|
||||
{ time: <%= video.info["length_seconds"].to_f - 0.5 %>, text: "End" }
|
||||
<% else %>
|
||||
{ time: <%= video_end %>, text: "End" }
|
||||
<% end %>
|
||||
]
|
||||
});
|
||||
|
||||
player.currentTime(<%= video_start %>);
|
||||
<% end %>
|
||||
|
||||
<% if !listen %>
|
||||
var currentSources = player.currentSources();
|
||||
for (var i = 0; i < currentSources.length; i++) {
|
||||
if (player.canPlayType(currentSources[i]["type"].split(";")[0]) === "") {
|
||||
currentSources.splice(i);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
|
||||
player.src(currentSources);
|
||||
<% end %>
|
||||
</script>
|
||||
<%= rendered "components/player" %>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -22,175 +22,15 @@
|
|||
<meta name="twitter:player" content="<%= host_url %>/embed/<%= video.id %>">
|
||||
<meta name="twitter:player:width" content="1280">
|
||||
<meta name="twitter:player:height" content="720">
|
||||
<link rel="stylesheet" href="https://unpkg.com/video.js@6.12.0/dist/video-js.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/css/quality-selector.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/videojs-markers@1.0.1/dist/videojs.markers.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.css">
|
||||
<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>
|
||||
<script src="https://unpkg.com/silvermine-videojs-quality-selector@1.1.2/dist/js/silvermine-videojs-quality-selector.min.js"></script>
|
||||
<script src="https://unpkg.com/videojs-markers@1.0.1/dist/videojs-markers.min.js"></script>
|
||||
<script src="https://unpkg.com/videojs-share@1.1.0/dist/videojs-share.min.js"></script>
|
||||
<%= rendered "components/player_sources" %>
|
||||
<title><%= HTML.escape(video.title) %> - Invidious</title>
|
||||
<% end %>
|
||||
|
||||
<% if hlsvp %>
|
||||
<script src="https://unpkg.com/videojs-contrib-hls@5.14.1/dist/videojs-contrib-hls.min.js"></script>
|
||||
<% end %>
|
||||
|
||||
<div class="h-box">
|
||||
<video style="width:100%" playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>"
|
||||
id="player" class="video-js"
|
||||
<% if autoplay %>autoplay<% end %>
|
||||
<% if video_loop %>loop<% end %>
|
||||
controls>
|
||||
<% if hlsvp %>
|
||||
<source src="<%= hlsvp %>" type="application/x-mpegURL">
|
||||
<% else %>
|
||||
<% 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 %>">
|
||||
<% end %>
|
||||
<% else %>
|
||||
<% fmt_stream.each_with_index do |fmt, i| %>
|
||||
<% if preferences %>
|
||||
<source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= preferences.quality == fmt["label"].split(" - ")[0] %>">
|
||||
<% else %>
|
||||
<source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= i == 0 ? true : false %>">
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% preferred_captions.each_with_index do |caption, i| %>
|
||||
<track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption.name.simpleText %>"
|
||||
label="<%= caption.name.simpleText %>" <% if i == 0 %>default<% end %>>
|
||||
<% end %>
|
||||
|
||||
<% captions.each do |caption| %>
|
||||
<track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption.name.simpleText %>"
|
||||
label="<%= caption.name.simpleText %>">
|
||||
<% end %>
|
||||
<% end %>
|
||||
</video>
|
||||
<%= rendered "components/player" %>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var options = {
|
||||
aspectRatio: "16:9",
|
||||
preload: "auto",
|
||||
playbackRates: [0.5, 1, 1.5, 2],
|
||||
controlBar: {
|
||||
children: [
|
||||
"playToggle",
|
||||
"volumePanel",
|
||||
"currentTimeDisplay",
|
||||
"timeDivider",
|
||||
"durationDisplay",
|
||||
"progressControl",
|
||||
"remainingTimeDisplay",
|
||||
"captionsButton",
|
||||
"qualitySelector",
|
||||
"playbackRateMenuButton",
|
||||
"fullscreenToggle"
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
var shareOptions = {
|
||||
socials: ["fb", "tw", "reddit", "mail"],
|
||||
|
||||
url: "<%= host_url %>/<%= video.id %>?<%= host_params %>",
|
||||
title: "<%= video.title.dump_unquoted %>",
|
||||
description: "<%= description %>",
|
||||
image: "<%= thumbnail %>",
|
||||
embedCode: `<iframe id='ivplayer' type='text/html' width='640' height='360'
|
||||
src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>`
|
||||
};
|
||||
|
||||
var player = videojs("player", options, function() {
|
||||
this.hotkeys({
|
||||
volumeStep: 0.1,
|
||||
seekStep: 5,
|
||||
enableModifiersForNumbers: false,
|
||||
customKeys: {
|
||||
play: {
|
||||
key: function(e) {
|
||||
// Toggle play with K Key
|
||||
return e.which === 75;
|
||||
},
|
||||
handler: function(player, options, e) {
|
||||
if (player.paused()) {
|
||||
player.play();
|
||||
} else {
|
||||
player.pause();
|
||||
}
|
||||
}
|
||||
},
|
||||
backward: {
|
||||
key: function(e) {
|
||||
// Go backward 5 seconds
|
||||
return e.which === 74;
|
||||
},
|
||||
handler: function(player, options, e) {
|
||||
player.currentTime(player.currentTime() - 5);
|
||||
}
|
||||
},
|
||||
forward: {
|
||||
key: function(e) {
|
||||
// Go forward 5 seconds
|
||||
return e.which === 76;
|
||||
},
|
||||
handler: function(player, options, e) {
|
||||
player.currentTime(player.currentTime() + 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
player.share(shareOptions);
|
||||
|
||||
<% if video_start > 0 || video_end > 0 %>
|
||||
player.markers({
|
||||
onMarkerReached: function(marker) {
|
||||
if (marker.text === "End") {
|
||||
if (player.loop()) {
|
||||
player.markers.prev("Start");
|
||||
} else {
|
||||
player.pause();
|
||||
}
|
||||
}
|
||||
},
|
||||
markers: [
|
||||
{ time: <%= video_start %>, text: "Start" },
|
||||
<% if video_end < 0 %>
|
||||
{ time: <%= video.info["length_seconds"].to_f - 0.5 %>, text: "End" }
|
||||
<% else %>
|
||||
{ time: <%= video_end %>, text: "End" }
|
||||
<% end %>
|
||||
]
|
||||
});
|
||||
|
||||
player.currentTime(<%= video_start %>);
|
||||
<% end %>
|
||||
|
||||
<% if !listen %>
|
||||
var currentSources = player.currentSources();
|
||||
for (var i = 0; i < currentSources.length; i++) {
|
||||
if (player.canPlayType(currentSources[i]["type"].split(";")[0]) === "") {
|
||||
currentSources.splice(i);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
|
||||
player.src(currentSources);
|
||||
<% end %>
|
||||
|
||||
<% if preferences %>
|
||||
player.volume(<%= preferences.volume.to_f / 100 %>);
|
||||
player.playbackRate(<%= preferences.speed %>);
|
||||
<% end %>
|
||||
|
||||
function toggle(target) {
|
||||
body = target.parentNode.parentNode.children[1];
|
||||
if (body.style.display === null || body.style.display === "") {
|
||||
|
|
|
|||
Loading…
Reference in a new issue