276 lines
10 KiB
HTML
276 lines
10 KiB
HTML
<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>
|
|
</head>
|
|
{% extends "base.html" %}
|
|
{% block content %}
|
|
<div style="width: 80%;" class="ui container">
|
|
|
|
{% if info.error == True %}
|
|
<div class="ui center aligned text container">
|
|
<div class="ui segment">
|
|
<h3 class="ui header"><i class="times icon"></i> ERROR WITH VIDEO </h3>
|
|
<h5 class="ui header">Try to reload the page. Most times this solves the error.</h5>
|
|
<h4 class="ui header">Other reasons.</h4>
|
|
<div class="ui list">
|
|
<div class="item">
|
|
<div class="header"><i class="calendar icon"> </i>Scheduled Video</div>
|
|
Scheduled videos are not supported.
|
|
</div>
|
|
<div class="item">
|
|
<div class="header"><i class="red circle icon"> </i>Livestream video</div>
|
|
Livestream videos are not yet supported.
|
|
</div>
|
|
<div class="item">
|
|
<div class="header">Other reasons</div>
|
|
If none of the above is the case, you might have found a bug. <a href="https://github.com/ytorg/Yotter/issues/new/choose">Report it!</a>
|
|
</div>
|
|
</div>
|
|
<p>Sorry for the inconveninet. Yotter is in a Beta state, so expect errors!</p>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
{% if info.start_time != None %}
|
|
{% elif info.is_live != None %}
|
|
<!--<div class="video-js-responsive-container vjs-hd">
|
|
<video-js id=live width="1080" class="video-js vjs-default-skin" controls>
|
|
<source
|
|
src="#"
|
|
type="application/x-mpegURL">
|
|
</video-js>
|
|
</div>-->
|
|
<div class="ui center aligned text container">
|
|
<div class="ui segment">
|
|
<h3 class="ui header"><i class="red small circle icon"></i> LIVESTREAM VIDEO</h3>
|
|
<h4 class="ui header">FEATURE AVAILABLE SOON</h4>
|
|
<h5 class="ui header">Livestreams are under developent and still not supported on Yotter.</h5>
|
|
</div>
|
|
</div>
|
|
{%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
|
|
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="{{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
|
|
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
|
|
</video-js>
|
|
</div>
|
|
{%endif%}
|
|
|
|
<div class="ui segments">
|
|
<div class="ui segment">
|
|
<h2 class="ui header break-word">{{info.title}}</h2>
|
|
</div>
|
|
<div class="ui horizontal segments">
|
|
<div class="center aligned ui segment">
|
|
<a href="{{ url_for('channel', id=info.channel_id)}}">
|
|
<i class="user icon"></i> <b>{{info.uploader}}</b>
|
|
</a>
|
|
<div class="label">
|
|
<i class="user icon"></i>{{info.subscriber_count}}
|
|
</div>
|
|
</div>
|
|
<div class="center aligned ui segment">
|
|
<div class="ui mini statistic">
|
|
<div class="value">
|
|
<i class="grey eye icon"></i> <b>{{info.view_count}}</b>
|
|
</div>
|
|
<div class="label">
|
|
views
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="center aligned ui segment">
|
|
{% if info.average_rating | int > 2.5 %}
|
|
<div class="ui mini statistic">
|
|
<div class="value">
|
|
<i class="green thumbs up icon"></i> <b>{{info.average_rating}}/5</b>
|
|
</div>
|
|
<div class="label">
|
|
Total: {{info.total_likes}} votes
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="ui mini statistic">
|
|
<div class="value">
|
|
<i class="red thumbs down icon"></i> <b>{{info.average_rating}}/5</b>
|
|
</div>
|
|
<div class="label">
|
|
Total: {{info.total_likes}} votes
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui raised center aligned segment break-word">
|
|
<p><i class="grey music icon"></i><b>Audio Only</b></p>
|
|
<audio controls>
|
|
{% for format in info.audio_formats %}
|
|
<source src="{{format.url}}">
|
|
{%endfor%}
|
|
No audio available.
|
|
</audio>
|
|
</div>
|
|
|
|
<div class="ui raised segment break-word">
|
|
<p>{{info.description}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{%if videocomments%}
|
|
<div class="ui comments">
|
|
<h3 class="ui dividing header">Comments</h3>
|
|
{% for comment in videocomments %}
|
|
{% include '_video_comment.html' %}
|
|
{% endfor %}
|
|
</div>
|
|
{%endif%}
|
|
|
|
{% if info.live %}
|
|
<script src="{{ url_for('static',filename='videojs-http-streaming.min.js')}}"></script>
|
|
<script>
|
|
var player = videojs('live');
|
|
player.play();
|
|
</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').ready(function() {
|
|
this.hotkeys({
|
|
volumeStep: 0.1,
|
|
seekStep: 5,
|
|
enableMute: true,
|
|
enableFullscreen: true,
|
|
enableNumbers: false,
|
|
enableVolumeScroll: true,
|
|
enableHoverScroll: true,
|
|
|
|
// Mimic VLC seek behavior, and default to 5.
|
|
seekStep: function(e) {
|
|
if (e.ctrlKey && e.altKey) {
|
|
return 5*60;
|
|
} else if (e.ctrlKey) {
|
|
return 60;
|
|
} else if (e.altKey) {
|
|
return 10;
|
|
} else {
|
|
return 5;
|
|
}
|
|
},
|
|
|
|
// Enhance existing simple hotkey with a complex hotkey
|
|
fullscreenKey: function(e) {
|
|
// fullscreen with the F key or Ctrl+Enter
|
|
return ((e.which === 70) || (e.ctrlKey && e.which === 13));
|
|
},
|
|
|
|
// Custom Keys
|
|
customKeys: {
|
|
|
|
// Add new simple hotkey
|
|
simpleKey: {
|
|
key: function(e) {
|
|
// Toggle something with S Key
|
|
return (e.which === 83);
|
|
},
|
|
handler: function(player, options, e) {
|
|
// Example
|
|
if (player.paused()) {
|
|
player.play();
|
|
} else {
|
|
player.pause();
|
|
}
|
|
}
|
|
},
|
|
|
|
// Add new complex hotkey
|
|
complexKey: {
|
|
key: function(e) {
|
|
// Toggle something with CTRL + D Key
|
|
return (e.ctrlKey && e.which === 68);
|
|
},
|
|
handler: function(player, options, event) {
|
|
// Example
|
|
if (options.enableMute) {
|
|
player.muted(!player.muted());
|
|
}
|
|
}
|
|
},
|
|
|
|
// Override number keys example from https://github.com/ctd1500/videojs-hotkeys/pull/36
|
|
numbersKey: {
|
|
key: function(event) {
|
|
// Override number keys
|
|
return ((event.which > 47 && event.which < 59) || (event.which > 95 && event.which < 106));
|
|
},
|
|
handler: function(player, options, event) {
|
|
// Do not handle if enableModifiersForNumbers set to false and keys are Ctrl, Cmd or Alt
|
|
if (options.enableModifiersForNumbers || !(event.metaKey || event.ctrlKey || event.altKey)) {
|
|
var sub = 48;
|
|
if (event.which > 95) {
|
|
sub = 96;
|
|
}
|
|
var number = event.which - sub;
|
|
player.currentTime(player.duration() * number * 0.1);
|
|
}
|
|
}
|
|
},
|
|
|
|
emptyHotkey: {
|
|
// Empty
|
|
},
|
|
|
|
withoutKey: {
|
|
handler: function(player, options, event) {
|
|
console.log('withoutKey handler');
|
|
}
|
|
},
|
|
|
|
withoutHandler: {
|
|
key: function(e) {
|
|
return true;
|
|
}
|
|
},
|
|
|
|
malformedKey: {
|
|
key: function() {
|
|
console.log('I have a malformed customKey. The Key function must return a boolean.');
|
|
},
|
|
handler: function(player, options, event) {
|
|
//Empty
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|