Add video quality selector
Signed-off-by: Jesús <heckyel@hyperbola.info>
This commit is contained in:
@@ -55,8 +55,17 @@
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
{% if pair_sources and (not uni_sources or pair_sources[pair_idx][0]['quality'] != uni_sources[uni_idx]['quality']) %}
|
||||
<script src="/youtube.com/static/js/av-merge.js"></script>
|
||||
<script src="/youtube.com/static/js/av-merge.js"></script>
|
||||
{% if using_pair_sources %}
|
||||
<!-- Initialize av-merge -->
|
||||
<script>
|
||||
var srcPair = data['pair_sources'][data['pair_idx']];
|
||||
var video = document.getElementById('js-video-player');
|
||||
var videoSource = srcPair[0];
|
||||
// Do it dynamically rather than as the default in jinja
|
||||
// in case javascript is disabled
|
||||
avInitialize(video, srcPair, 0);
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% if time_start != 0 %}
|
||||
@@ -93,8 +102,41 @@
|
||||
<div class="external-player-controls">
|
||||
<input class="speed" id="speed-control" type="text" title="Video speed">
|
||||
<script src="/youtube.com/static/js/speedyplay.js"></script>
|
||||
<select id="quality-select">
|
||||
{% for src in uni_sources %}
|
||||
<option value='{"type": "uni", "index": {{ loop.index0 }}}' {{ 'selected' if loop.index0 == uni_idx and not using_pair_sources else '' }} >{{ src['quality_string'] }} (integrated)</option>
|
||||
{% endfor %}
|
||||
{% for src_pair in pair_sources %}
|
||||
<option value='{"type": "pair", "index": {{ loop.index0}}}' {{ 'selected' if loop.index0 == pair_idx and using_pair_sources else '' }} >{{ src_pair[0]['quality_string'] }}, {{ src_pair[1]['quality_string'] }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<script>
|
||||
document.getElementById('quality-select').addEventListener(
|
||||
'change', function(e) {
|
||||
var video = document.getElementById('js-video-player');
|
||||
var selection = JSON.parse(this.value);
|
||||
var currentVideoTime = video.currentTime;
|
||||
var videoPaused = video.paused;
|
||||
var videoSpeed = video.playbackRate;
|
||||
var videoSource;
|
||||
if (selection.type == 'uni'){
|
||||
videoSource = data['uni_sources'][selection.index];
|
||||
video.src = videoSource.url;
|
||||
} else {
|
||||
let srcPair = data['pair_sources'][selection.index];
|
||||
videoSource = srcPair[0];
|
||||
avInitialize(video, srcPair, currentVideoTime);
|
||||
}
|
||||
setVideoDimensions(videoSource.height, videoSource.width);
|
||||
video.currentTime = currentVideoTime;
|
||||
if (!videoPaused){
|
||||
video.play();
|
||||
}
|
||||
video.playbackRate = videoSpeed;
|
||||
}
|
||||
);
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<input class="v-checkbox" name="video_info_list" value="{{ video_info }}" form="playlist-edit" type="checkbox">
|
||||
|
||||
<span class="v-direct-link"><a href="https://youtu.be/{{ video_id }}" rel="noopener noreferrer" target="_blank">Direct Link</a></span>
|
||||
|
||||
Reference in New Issue
Block a user