This repository has been archived on 2022-06-28. You can view files and clone it, but cannot push or open issues or pull requests.
Yotter/app/templates/video.html
2020-10-06 17:34:38 +02:00

99 lines
3.8 KiB
HTML

<head>
<link rel="stylesheet" type= "text/css" href="{{ url_for('static',filename='video-js.min.css') }}">
</head>
{% extends "base.html" %}
{% block content %}
<div class="ui text container">
{% if video.nginxUrl == "#" %}
<div class="ui center aligned text container">
<div class="ui segment">
<h4 class="ui header">ERROR WITH VIDEO</h4>
</div>
</div>
{% elif video.isUpcoming %}
<div class="ui center aligned text container">
<div class="ui segment">
<h4 class="ui header">SCHEDULED VIDEO</h4>
<h5 class="ui header">{{video.premieres}}</h5>
</div>
</div>
{% elif video.isLive %}
<div class="video-js-responsive-container vjs-hd">
<video-js id=live width="1080" class="video-js vjs-default-skin" controls buffered>
<source
src="{{urls[0]['url']}}"
type="application/x-mpegURL">
</video-js>
</div>
<div class="ui center aligned text container">
<div class="ui segment">
<h3 class="ui header">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 class="video-js vjs-default-skin"
data-setup='{ "playbackRates": [0.5, 0.75, 1, 1.25,1.5, 1.75, 2] }'
width="1080"
controls
buffered
preload="none">
{% if config.nginxVideoStream %}
{% for url in urls %}
<source src="{{url.url}}" type="video/{{url.ext}}">
{% endfor %}
{% else %}
<source src="{{url_for('stream', url=video.videoUrl.replace('/', 'YotterSlash'))}}" type="video/mp4">
{% endif %}
</video>
</div>
{%endif%}
<div class="ui segments">
<div class="ui segment">
<h2 class="ui header break-word">{{video.title}}</h2>
</div>
<div class="ui horizontal segments">
<div class="center aligned ui segment">
<a href="{{ url_for('channel', id=video.channelId)}}">
{%if video.author.__len__() > 8%}
<i class="user icon"></i> {{video.author[0:10]+'...'}}
{%else%}
<i class="user icon"></i> {{video.author}}
{%endif%}
</a>
</div>
<div class="center aligned ui segment">
<h4 class="ui header"><i class="grey eye icon"></i>{{video.viewCount}}</h4>
</div>
<div class="center aligned ui segment">
{% if video.averageRating | int > 49 %}
<h4 class="ui header"><i class="green thumbs up icon"></i> {{video.averageRating[0:4]}}%</h4>
{% else %}
<h4 class="ui header"><i class="red thumbs down icon"></i> {{video.averageRating[0:4]}}%</h4>
{% endif %}
</div>
</div>
<div class="ui raised center aligned segment break-word">
<p><i class="grey music icon"></i><b><a href="{{video.nginxAudioUrl}}">Play Only Audio</a></b></p>
<audio controls>
<source src="{{video.nginxAudioUrl}}">
Your browser does not support the audio element.
</audio>
</div>
<div class="ui raised segment break-word">
<p>{{video.description}}</p>
</div>
</div>
</div>
<script src="{{ url_for('static',filename='video.min.js') }}"></script>
<script src="{{ url_for('static',filename='videojs-http-streaming.min.js')}}"></script>
<script>
var player = videojs('live');
player.play();
</script>
{% endblock %}