File size: 3,468 Bytes
852ac26 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
{% extends 'base.html' %}
{%load static%}
{%block content%}
<div class="bg" >
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-12 my-auto">
<div class="logo text-center mb-3"><img src="{% static 'images/logo1.png'%}" alt="Logo" ></div>
<div class="width-400">
<video width="100%" controls id="videos">
<source src="" id="video_source">
Your browser does not support HTML5 video.
</video>
<form class="form" method="POST" enctype="multipart/form-data" name="video-upload" id="video-upload"
class="text-center mt-3">
{%csrf_token%}
<div class="form-group">
<label>{{form.upload_video_file.widget}}</label>
{{form.upload_video_file}}
<!-- <input type="file" id="{{form.upload_video_file.id_for_label}}" name="{{form.upload_video_file.name}}" /> -->
{%if form.upload_video_file.errors%}
{%for each_error in form.upload_video_file.errors%}
<div class="alert alert-danger mt-1 {{form.upload_video_file.id_for_label}}">
{{each_error}}
</div>
{%endfor%}
{%endif%}
</div>
<div class="form-group">
<label for="{{form.sequence_length.id_for_label}}">{{form.sequence_length.label}}: </label><span
id="slider-value"></span>
<input type="number" hidden="hidden" id="{{form.sequence_length.id_for_label}}"
name="{{form.sequence_length.name}}"></input>
<div id='slider'></div>
{%if form.sequence_length.errors%}
{%for each_error in form.sequence_length.errors%}
<div class="alert alert-danger mt-1 {{form.sequence_length.id_for_label}}">
{{each_error}}
</div>
{%endfor%}
{%endif%}
</div>
<button id="videoUpload" type="submit" name="submit" class="btn btn-success mt-3 btn-block">Upload</button>
</form>
</div>
</div>
</div>
</div>
</div>
{%endblock%}
{%block js_cripts%}
<script src="{%static 'js/script.js'%}"></script>
<script>
$(function () {
var sliderSequenceNumbers = [10,20,40,60,80,100];
var slider = $("div#slider").slider({
value: 1,
min: 0,
max: sliderSequenceNumbers.length-1,
slide: function (event, ui) {
$('#{{form.sequence_length.id_for_label}}').val(sliderSequenceNumbers[ui.value]);
$('#{{form.sequence_length.id_for_label}}').val(sliderSequenceNumbers[ui.value]);
$('#slider-value').html(sliderSequenceNumbers[ui.value]);
}
});
$("#{{form.sequence_length.id_for_label}}").val(sliderSequenceNumbers[$("#slider").slider("value")]);
$('#slider-value').html(sliderSequenceNumbers[$("#slider").slider("value")]);
});
</script>
{%endblock%} |