kavin/Yotter
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Support for video quality selection

Browse Source
This commit is contained in:
pluja 2020-11-20 12:40:52 +01:00
parent a8b05edba1
commit ba1f23d77e
3 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/static/quality-selector.css Normal file
View File

@ -0,0 +1 @@
.vjs-quality-selector .vjs-menu-button{margin:0;padding:0;height:100%;width:100%}.vjs-quality-selector .vjs-icon-placeholder{font-family:'VideoJS';font-weight:normal;font-style:normal}.vjs-quality-selector .vjs-icon-placeholder:before{content:'\f110'}.vjs-quality-changing .vjs-big-play-button{display:none}.vjs-quality-changing .vjs-control-bar{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;visibility:visible;opacity:1}

4
app/static/videojs-quality-selector.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

26
app/templates/video.html
View File

@ -1,6 +1,9 @@
<head>
<link rel="stylesheet" type= "text/css" href="{{ url_for('static',filename='video-js.min.css') }}">
<script src="{{ url_for('static',filename='video.min.js') }}"></script>
<link rel="stylesheet" type= "text/css" href="{{ url_for('static',filename='quality-selector.css') }}">
<script src="{{ url_for('static',filename='videojs-quality-selector.min.js') }}"></script>
<link rel="stylesheet" type= "text/css" href="{{ url_for('static',filename='video-js.min.css') }}">
<script src="{{ url_for('static',filename='video.min.js') }}"></script>
</head>
{% extends "base.html" %}
{% block content %}
@ -49,15 +52,16 @@
{%else%}
<div class="video-js-responsive-container vjs-hd">
<video-js id="video-1" class="video-js vjs-default-skin vjs-big-play-centered"
qualitySelector
controls
data-setup='{ "playbackRates": [0.5, 1, 1.25, 1.5, 1.75, 2] }'
autofocus
data-setup='{ "playbackRates": [0.5, 1, 1.25, 1.5, 1.75, 2] }'
width="1080"
buffered
preload="none">
{% if config.isInstance %}
{% for source in info.formats %}
<source src="https://yotter.xyz{{source.url}}" type="video/{{source.ext}}">
<source src="{{source.url}}" type="video/{{source.ext}}" label="{{source.format_note}}">
{% endfor %}
{% endif %}
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that
@ -144,12 +148,20 @@
</script>
{% endif %}
{%endif%}
<!-- SETUP QUALITY SELECTOR -->
<script>
videojs("video-1", {}, function() {
var player = this;
player.controlBar.addChild('QualitySelector');
});
</script>
<!-- SETUP CONTROL HOTKEYS -->
<script src="{{ url_for('static',filename='videojs.hotkeys.min.js') }}"></script>
<script>
// initialize the plugin
videojs('video-1', {
playbackRates: [0.5, 1, 1.25, 1.5, 1.75, 2]
});
videojs('video-1').ready(function() {
this.hotkeys({