kenneth/mediahls
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v0.1

Browse Source
This commit is contained in:
kenneth
2023-12-01 02:46:50 +00:00
parent 90e6ba5070
commit 1bb57bc94a
26 changed files with 1312 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
web/templates/video/edit.html.tmpl Normal file
View File

@@ -0,0 +1,126 @@
{{template "header" .}}
<div class="container-fluid flex justify-content">
<div class="main">
<div class="title">
<h3>上传视频</h3>
<a href="/me/videos" class="btn btn-primary">返回列表</a>
</div>
<div class="col-sm-6 py-md-5 flex flex-column justify-content">
<form action="/me/videos/create" method="post">
{{if .ID}}
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">ID</span>
</div>
<input type="text" class="form-control" disabled value="{{.ID}}">
<input type="hidden" value="{{.ID}}" name="id">
</div>
</div>
{{end}}
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">标题</span>
</div>
<input type="text" name="title" class="form-control" required id="title" value="{{.Title}}"
aria-describedby="titleValid">
</div>
{{if .TitleErr}}
<small id="titleValid" style="color: #f44336;" class="form-text">{{.TitleErr}}</small>
{{end}}
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">图片</span>
</div>
<input type="file" class="form-control" id="upload_images">
<input type="button" class="btn btn-secondary" value="上传" onclick="uploadImage()" />
<input type="hidden" id="images" name="images" required value="{{.Images}}" aria-describedby="imagesValid">
</div>
<div class="image-box" style="margin-top: 8px;">
{{if .Images}}
<img width="120px" src="{{.Images}}" />
{{end}}
</div>
{{if .ImagesErr}}
<small id="imagesValid" style="color: #f44336;" class="form-text">{{.ImagesErr}}</small>
{{end}}
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">描述</span>
</div>
<textarea class="form-control" id="description" name="description" required
aria-describedby="descriptionValid" rows="3">{{.Description}}</textarea>
</div>
{{if .DescriptionErr}}
<small id="descriptionValid" style="color: #f44336;" class="form-text">{{.DescriptionErr}}</small>
{{end}}
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">视频</span>
</div>
<input type="file" class="form-control" id="upload_video">
<input type="button" class="btn btn-secondary" value="上传" onclick="uploadVideo()" />
<input type="hidden" id="video" name="origin_link" required value="{{.OriginLink}}">
</div>
<div class="video-box" style="margin-top: 8px;">
{{if .OriginLink}}
<p>{{.OriginLink}}</p>
{{end}}
</div>
<small id="upload_video_msg" style="color: #f44336;" class="form-text">
{{.OriginLinkErr}}
</small>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
</div>
</div>
{{define "js"}}
<script>
function uploadImage() {
var files = $('#upload_images').prop('files');
var data = new FormData();
data.append('file', files[0]);
$.ajax({
url: '/upload_image',
type: 'POST',
data: data,
cache: false,
processData: false,
contentType: false,
success: function (res) {
$('#images').val(res);
$('.image-box').append('<img width="120px" src="' + res + '" />');
}
})
}
function uploadVideo() {
var files = $('#upload_video').prop('files');
var data = new FormData();
data.append('file', files[0]);
$.ajax({
url: '/upload_file',
type: 'POST',
data: data,
cache: false,
processData: false,
contentType: false,
success: function (res) {
$('#video').val(res);
$('#upload_video_msg').html('上传成功')
}
})
}
</script>
{{end}}
{{template "footer" .}}

44
web/templates/video/play.html.tmpl
View File

@@ -1,14 +1,25 @@
{{template "header" .}}
<div class="container-fluid flex justify-content">
<div class="main">
<h6 style="margin-top: 20px;margin-bottom: 10px;">正在播放
{{if eq .Video.Status 200}}
<h6 style="margin-top: 20px;margin-bottom: 10px;">正在播放
<svg class="icon" viewBox="0 0 1024 1024" width="15" height="21">
<path d="M607.698947 992.000352c0-7.399919-2.599971-14.899836-7.799914-20.89977l-360.79603-416.99541c-20.999769-23.999736-20.999769-60.299336 0-84.299073l0.099999-0.099999L599.899033 52.910688c11.599872-13.399853 10.099889-33.59963-3.299964-45.099504-13.399853-11.599872-33.59963-10.099889-45.099504 3.299964L190.903534 427.806562c-20.399775 23.299744-31.599652 53.199414-31.599652 84.199073s11.199877 60.89933 31.599652 84.199073l360.596031 416.695414c11.599872 13.399853 31.79965 14.799837 45.099504 3.299964 7.399919-6.299931 11.099878-15.199833 11.099878-24.199734z" p-id="6425"></path><path d="M864.696118 992.000352c0-7.399919-2.599971-14.899836-7.799914-20.89977l-360.796029-416.99541c-20.999769-23.999736-20.999769-60.299336 0-84.299073l0.099999-0.099999L856.896204 52.910688c11.599872-13.399853 10.099889-33.59963-3.299964-45.099504-13.399853-11.599872-33.59963-10.099889-45.099503 3.299964L447.900705 427.806562c-20.399775 23.299744-31.599652 53.199414-31.599652 84.199073s11.199877 60.89933 31.599652 84.199073l360.596032 416.695414c11.599872 13.399853 31.79965 14.799837 45.099503 3.299964 7.399919-6.299931 11.099878-15.199833 11.099878-24.199734z" p-id="6426"></path>
</svg>Git - Div Rhino<svg class="icon" viewBox="0 0 1024 1024" width="15" height="21">
<path d="M416.301053 992.000352c0-7.399919 2.599971-14.899836 7.799914-20.89977l360.79603-416.895412c20.999769-23.999736 20.999769-60.299336 0-84.299072l-0.099999-0.099999L424.100967 52.910688c-11.599872-13.399853-10.099889-33.59963 3.299964-45.099504 13.399853-11.599872 33.59963-10.099889 45.099504 3.299964l360.596031 416.695414c20.399775 23.299744 31.599652 53.199414 31.599652 84.199073s-11.199877 60.89933-31.599652 84.199073l-360.596031 416.695414c-11.599872 13.399853-31.79965 14.799837-45.099504 3.299964-7.399919-6.299931-11.099878-15.199833-11.099878-24.199734z" p-id="6274"></path><path d="M159.303882 992.000352c0-7.399919 2.599971-14.899836 7.799914-20.89977l360.796029-416.895412c20.999769-23.999736 20.999769-60.299336 0-84.299072l-0.099999-0.099999L167.103796 52.910688c-11.599872-13.399853-10.099889-33.59963 3.299964-45.099504 13.399853-11.599872 33.59963-10.099889 45.099503 3.299964l360.596032 416.695414c20.399775 23.299744 31.599652 53.199414 31.599652 84.199073s-11.199877 60.89933-31.599652 84.199073l-360.596032 416.695414c-11.599872 13.399853-31.79965 14.799837-45.099503 3.299964-7.399919-6.299931-11.099878-15.199833-11.099878-24.199734z" p-id="6275"></path>
<path
d="M607.698947 992.000352c0-7.399919-2.599971-14.899836-7.799914-20.89977l-360.79603-416.99541c-20.999769-23.999736-20.999769-60.299336 0-84.299073l0.099999-0.099999L599.899033 52.910688c11.599872-13.399853 10.099889-33.59963-3.299964-45.099504-13.399853-11.599872-33.59963-10.099889-45.099504 3.299964L190.903534 427.806562c-20.399775 23.299744-31.599652 53.199414-31.599652 84.199073s11.199877 60.89933 31.599652 84.199073l360.596031 416.695414c11.599872 13.399853 31.79965 14.799837 45.099504 3.299964 7.399919-6.299931 11.099878-15.199833 11.099878-24.199734z"
p-id="6425"></path>
<path
d="M864.696118 992.000352c0-7.399919-2.599971-14.899836-7.799914-20.89977l-360.796029-416.99541c-20.999769-23.999736-20.999769-60.299336 0-84.299073l0.099999-0.099999L856.896204 52.910688c11.599872-13.399853 10.099889-33.59963-3.299964-45.099504-13.399853-11.599872-33.59963-10.099889-45.099503 3.299964L447.900705 427.806562c-20.399775 23.299744-31.599652 53.199414-31.599652 84.199073s11.199877 60.89933 31.599652 84.199073l360.596032 416.695414c11.599872 13.399853 31.79965 14.799837 45.099503 3.299964 7.399919-6.299931 11.099878-15.199833 11.099878-24.199734z"
p-id="6426"></path>
</svg>{{.Video.Title}}<svg class="icon" viewBox="0 0 1024 1024" width="15" height="21">
<path
d="M416.301053 992.000352c0-7.399919 2.599971-14.899836 7.799914-20.89977l360.79603-416.895412c20.999769-23.999736 20.999769-60.299336 0-84.299072l-0.099999-0.099999L424.100967 52.910688c-11.599872-13.399853-10.099889-33.59963 3.299964-45.099504 13.399853-11.599872 33.59963-10.099889 45.099504 3.299964l360.596031 416.695414c20.399775 23.299744 31.599652 53.199414 31.599652 84.199073s-11.199877 60.89933-31.599652 84.199073l-360.596031 416.695414c-11.599872 13.399853-31.79965 14.799837-45.099504 3.299964-7.399919-6.299931-11.099878-15.199833-11.099878-24.199734z"
p-id="6274"></path>
<path
d="M159.303882 992.000352c0-7.399919 2.599971-14.899836 7.799914-20.89977l360.796029-416.895412c20.999769-23.999736 20.999769-60.299336 0-84.299072l-0.099999-0.099999L167.103796 52.910688c-11.599872-13.399853-10.099889-33.59963 3.299964-45.099504 13.399853-11.599872 33.59963-10.099889 45.099503 3.299964l360.596032 416.695414c20.399775 23.299744 31.599652 53.199414 31.599652 84.199073s-11.199877 60.89933-31.599652 84.199073l-360.596032 416.695414c-11.599872 13.399853-31.79965 14.799837-45.099503 3.299964-7.399919-6.299931-11.099878-15.199833-11.099878-24.199734z"
p-id="6275"></path>
</svg>
</h6>
<video id="video" controls width="100%"></video>
<video id="video" controls width="100%" style="background-color: #000000;"></video>
<div class="tip-box">
<div class="tip-icon">
<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="InfoOutlinedIcon">
@@ -22,22 +33,27 @@
<p>如果播放遇到问题，请尝试切换播放源。</p>
</div>
</div>
<div style="width: 100%; height: 600px;background-color: antiquewhite;"></div>
{{else}}
<div class="">该视频目前还不能播放!</div>
{{end}}
</div>
</div>
{{define "js"}}
<script src="/statics/js/hls.min.js"></script>
<script>
var video = document.getElementById('video');
if (Hls.isSupported()) {
console.log("supported");
var hls = new Hls();
hls.loadSource('{{.Url}}');
hls.loadSource('{{.Video.PlayLink}}');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
//video.play();
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
console.log("no supported");
video.src = '{{.Url}}';
video.src = '{{.Video.PlayLink}}';
video.addEventListener('loadedmetadata', function () {
//video.play();
});
@@ -45,7 +61,10 @@
// reurn false 禁止函数内部执行其他的事件或者方法
var vol = 0.1; // 1代表100%音量，每次增减0.1
var time = 10; // 单位秒，每次增减10秒
document.onkeyup = function (event) {//键盘事件
// 键盘事件
document.onkeyup = function (event) {
const nodeName = event.target.nodeName;
if (nodeName && (nodeName.toUpperCase() === "INPUT" || nodeName.toUpperCase() === "TEXTAREA")) { return; }
// console.log("keyCode:" + event.keyCode);
var e = event || window.event || arguments.callee.caller.arguments[0];
// 鼠标上下键控制视频音量
@@ -66,10 +85,19 @@
video.volume !== video.duration ? video.currentTime += time : 1;
return false;
} else if (e && e.keyCode === 32) {
// if (e.preventDefault) {
// e.preventDefault();
// } else {
// window.event.returnValue = false;
// }
// event.preventDefault();
// event.returnValue = false;
// 按空格键 判断当前是否暂停
// alert(1)
video.paused === true ? video.play() : video.pause();
return false;
}
}
</script>
{{end}}
{{template "footer" .}}

43
web/templates/video/transfer.html.tmpl Normal file
View File

@@ -0,0 +1,43 @@
{{template "header" .}}
<div class="container-fluid flex justify-content">
<div class="main">
<div class="title">
<h3>视频转码</h3>
</div>
<div>
<h5>{{.Video.Title}}</h5>
<p>{{.Video.Description}}</p>
<p><img src="{{.Video.Images}}" width="120px" /></p>
{{if eq .Video.Status 0}}
<p>该视频需要转码才能播放</p>
<button id="transfer" class="btn btn-primary">转码</button>
{{else if eq .Video.Status 1}}
<p>转码中...</p>
{{else if eq .Video.Status 2}}
<p>转码失败, 请联系管理员</p>
{{else if eq .Video.Status 200}}
<p>恭喜您, 转码成功!</p>
{{end}}
<p id="msg"></p>
</div>
</div>
</div>
{{define "js"}}
<script>
$('#transfer').click(function () {
let that = $(this)
that.attr("disable", true).html('转码中...')
$.ajax({
url: '/transfer/{{.Video.ID}}',
type: 'post',
success: function (obj) {
$('#msg').html(obj)
},
error: function (ex) {
console.log(ex)
}
});
});
</script>
{{end}}
{{template "footer" .}}