v0.1
This commit is contained in:
kenneth
@@ -1,5 +1,11 @@
|
||||
@charset "utf-8";
|
||||
|
||||
html,
|
||||
body {
|
||||
/* 禁用空格键的滚动 */
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
@@ -22,7 +28,7 @@
|
||||
|
||||
.navbar-wh {
|
||||
padding: 0.2rem 1.6rem;
|
||||
border-bottom: 1px solid rgba(0,0,0,.12);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .12);
|
||||
}
|
||||
|
||||
.navbar-brand-fs {
|
||||
@@ -54,6 +60,17 @@
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.main .title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.main .title a{
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.tip-box {
|
||||
width: 100%;
|
||||
background-color: rgb(229, 246, 253);
|
||||
@@ -68,7 +85,7 @@
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.tip-box .tip-icon svg{
|
||||
.tip-box .tip-icon svg {
|
||||
fill: currentColor;
|
||||
color: #007bff;
|
||||
}
|
||||
@@ -77,7 +94,18 @@
|
||||
letter-spacing: 0.00938em;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color:rgb(1, 67, 97);
|
||||
color: rgb(1, 67, 97);
|
||||
margin-bottom: 0;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.video-list {
|
||||
display: grid;
|
||||
/* 声明列的宽度 */
|
||||
grid-template-columns: repeat(4, 305px);
|
||||
/* 声明行间距和列间距 */
|
||||
grid-gap: 20px;
|
||||
/* 声明行的高度 */
|
||||
/* grid-template-rows: 360px; */
|
||||
margin-top: 25px;
|
||||
}
|
||||
2
web/statics/js/jquery.min.js
vendored
Normal file
2
web/statics/js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -11,7 +11,7 @@
|
||||
<div class="wrapper"> -->
|
||||
{{define "footer"}}
|
||||
</div>
|
||||
<script src="/statics/js/jquery.slim.min.js"></script>
|
||||
<script src="/statics/js/jquery.min.js"></script>
|
||||
<script src="/statics/js/bootstrap.bundle.min.js"></script>
|
||||
{{block "js" .}}{{end}}
|
||||
</body>
|
||||
|
||||
@@ -21,11 +21,14 @@
|
||||
HLS流媒体
|
||||
</a>
|
||||
<ul class="flex oauth">
|
||||
{{if .AuthID}}
|
||||
<li>
|
||||
欢迎您: {{.AuthName}}
|
||||
{{if .Authorize.ID}}
|
||||
<li style="font-size: 12px;">
|
||||
欢迎您: {{.Authorize.Name}}
|
||||
</li>
|
||||
<li>
|
||||
<li style="font-size: 12px;">
|
||||
<a href="/me/videos">我的视频</a>
|
||||
</li>
|
||||
<li style="font-size: 12px;">
|
||||
<a href="/logout" class="btn btn-primary btn-sm">退出</a>
|
||||
</li>
|
||||
{{else}}
|
||||
|
||||
@@ -1,51 +1,23 @@
|
||||
<!-- <!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>首页 - HLS流视频</title>
|
||||
<style>
|
||||
.container{
|
||||
width: 640px;
|
||||
}
|
||||
.container #video{
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<video id="video" controls></video>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||||
<script>
|
||||
var video = document.getElementById('video');
|
||||
if(Hls.isSupported()) {
|
||||
console.log("supported");
|
||||
var hls = new Hls();
|
||||
hls.loadSource('http://192.168.9.252:9090/statics/clip7iilsbb2u3en7mt0/index.m3u8');
|
||||
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 = 'http://192.168.9.252:9090/stream';
|
||||
video.addEventListener('loadedmetadata',function() {
|
||||
video.play();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html> -->
|
||||
|
||||
{{template "header" .}}
|
||||
<div class="container-fluid flex justify-content">
|
||||
<div class="main">
|
||||
<h3 style="margin-top: 20px;margin-bottom: 10px;">视频列表</h3>
|
||||
|
||||
<div class="video-list">
|
||||
{{range .Videos}}
|
||||
<div class="card">
|
||||
<img src="{{.Images}}" class="card-img-top" alt="{{.Title}}">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{.Title}}</h5>
|
||||
<p class="card-text">{{.Description}}</p>
|
||||
<a href="/play/{{.ID}}" class="btn btn-primary">播放</a>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{define "js"}}
|
||||
<script>
|
||||
</script>
|
||||
{{end}}
|
||||
{{template "footer" .}}
|
||||
73
web/templates/me/videos.html.tmpl
Normal file
73
web/templates/me/videos.html.tmpl
Normal file
@@ -0,0 +1,73 @@
|
||||
{{template "header" .}}
|
||||
<div class="container-fluid flex justify-content">
|
||||
<div class="main">
|
||||
<div class="title">
|
||||
<h3>我的视频</h3>
|
||||
<a href="/me/videos/create" class="btn btn-primary">添加</a>
|
||||
</div>
|
||||
<div class="video-list">
|
||||
{{range .Videos}}
|
||||
<div class="card">
|
||||
<img src="{{.Images}}" class="card-img-top" alt="{{.Title}}">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{.Title}}</h5>
|
||||
<p class="card-text">{{.Description}}</p>
|
||||
|
||||
<a href="/me/videos/create/{{.ID}}" class="btn btn-warning">编辑</a>
|
||||
<button id="del" data-id="{{.ID}}" class="btn btn-danger">删除</button>
|
||||
|
||||
{{if eq .Status 0}}
|
||||
<button id="transfer" data-id="{{.ID}}" class="btn btn-info">转码</button>
|
||||
{{else if eq .Status 200}}
|
||||
<a href="/play/{{.ID}}" class="btn btn-primary">播放</a>
|
||||
{{end}}
|
||||
|
||||
<div>
|
||||
{{if eq .Status 1}}
|
||||
<p>转码中...</p>
|
||||
{{else if eq .Status 2}}
|
||||
<p>转码失败</p>
|
||||
{{end}}
|
||||
<p id="msg"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{define "js"}}
|
||||
<script>
|
||||
$('#transfer').click(function () {
|
||||
let that = $(this)
|
||||
that.attr("disable", true).html('转码中...')
|
||||
let id = that.attr("data-id")
|
||||
$.ajax({
|
||||
url: '/transfer/' + id,
|
||||
type: 'post',
|
||||
success: function (obj) {
|
||||
$('#msg').html(obj)
|
||||
},
|
||||
error: function (ex) {
|
||||
console.log(ex)
|
||||
}
|
||||
});
|
||||
});
|
||||
$('#del').click(function () {
|
||||
let that = $(this)
|
||||
that.attr("disable", true).html('删除中...')
|
||||
let id = that.attr("data-id")
|
||||
$.ajax({
|
||||
url: '/transfer/' + id,
|
||||
type: 'post',
|
||||
success: function (obj) {
|
||||
$('#msg').html(obj)
|
||||
},
|
||||
error: function (ex) {
|
||||
console.log(ex)
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
{{template "footer" .}}
|
||||
@@ -1,31 +1,41 @@
|
||||
{{template "header" .}}
|
||||
<div class="container">
|
||||
<div class="flex flex-column align-items row py-md-5">
|
||||
<h1>登录</h1>
|
||||
<div class="col-sm-5 py-md-5">
|
||||
<form action="/login" method="post">
|
||||
<div class="form-group">
|
||||
<label for="email">邮箱</label>
|
||||
<input type="email" name="email" class="form-control" required id="email" value="{{.Email}}" aria-describedby="emailValid">
|
||||
{{if .EmailErr}}
|
||||
<small id="emailValid" style="color: #f44336;" class="form-text">{{.EmailErr}}</small>
|
||||
{{end}}
|
||||
<div class="flex flex-column align-items row py-md-5 mt-md-5">
|
||||
<h1>登录</h1>
|
||||
<div class="col-sm-4 py-md-5">
|
||||
<form action="/login" method="post">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">邮箱</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">密码</label>
|
||||
<input type="password" name="password" class="form-control" required id="password" value="{{.Password}}" aria-describedby="passwordValid">
|
||||
{{if .PasswordErr}}
|
||||
<small id="passwordValid" style="color: #f44336;" class="form-text">{{.PasswordErr}}</small>
|
||||
{{end}}
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">提交</button>
|
||||
</form>
|
||||
{{if .Summary}}
|
||||
<div class="py-md-5" style="color: #f44336;">
|
||||
{{.Summary}}
|
||||
<input type="email" name="email" class="form-control" required id="email" value="{{.Email}}"
|
||||
aria-describedby="emailValid">
|
||||
</div>
|
||||
{{if .EmailErr}}
|
||||
<small id="emailValid" style="color: #f44336;" class="form-text">{{.EmailErr}}</small>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">密码</span>
|
||||
</div>
|
||||
<input type="password" name="password" class="form-control" required id="password" value="{{.Password}}"
|
||||
aria-describedby="passwordValid">
|
||||
</div>
|
||||
{{if .PasswordErr}}
|
||||
<small id="passwordValid" style="color: #f44336;" class="form-text">{{.PasswordErr}}</small>
|
||||
{{end}}
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-block">提交</button>
|
||||
</form>
|
||||
{{if .Summary}}
|
||||
<div class="py-md-5" style="color: #f44336;">
|
||||
{{.Summary}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "footer" .}}
|
||||
@@ -1,38 +1,53 @@
|
||||
{{template "header" .}}
|
||||
<div class="container">
|
||||
<div class="flex flex-column align-items row py-md-5">
|
||||
<h1>注册</h1>
|
||||
<div class="col-sm-5 py-md-5">
|
||||
<form action="/register" method="post">
|
||||
<div class="form-group">
|
||||
<label for="email">邮箱</label>
|
||||
<input type="email" name="email" class="form-control" required id="email" value="{{.Email}}" aria-describedby="emailValid">
|
||||
{{if .EmailErr}}
|
||||
<small id="emailValid" style="color: #f44336;" class="form-text">{{.EmailErr}}</small>
|
||||
{{end}}
|
||||
<div class="flex flex-column align-items row py-md-5 mt-md-5">
|
||||
<h1>注册</h1>
|
||||
<div class="col-sm-4 py-md-5">
|
||||
<form action="/register" method="post">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">邮箱</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="username">名称</label>
|
||||
<input type="text" name="username" class="form-control" required id="username" value="{{.Username}}" style="width: 100%;" aria-describedby="usernameValid">
|
||||
{{if .UsernameErr}}
|
||||
<small id="usernameValid" style="color: #f44336;" class="form-text">{{.UsernameErr}}</small>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">密码</label>
|
||||
<input type="password" name="password" class="form-control" required id="password" value="{{.Password}}" aria-describedby="passwordValid">
|
||||
{{if .PasswordErr}}
|
||||
<small id="passwordValid" style="color: #f44336;" class="form-text">{{.PasswordErr}}</small>
|
||||
{{end}}
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">提交</button>
|
||||
</form>
|
||||
{{if .Summary}}
|
||||
<div class="py-md-5" style="color: #f44336;">
|
||||
{{.Summary}}
|
||||
<input type="email" name="email" class="form-control" required id="email" value="{{.Email}}"
|
||||
aria-describedby="emailValid">
|
||||
</div>
|
||||
{{if .EmailErr}}
|
||||
<small id="emailValid" style="color: #f44336;" class="form-text">{{.EmailErr}}</small>
|
||||
{{end}}
|
||||
</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="username" class="form-control" required id="username" value="{{.Username}}"
|
||||
aria-describedby="usernameValid">
|
||||
</div>
|
||||
{{if .UsernameErr}}
|
||||
<small id="usernameValid" style="color: #f44336;" class="form-text">{{.UsernameErr}}</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="password" name="password" class="form-control" required id="password" value="{{.Password}}"
|
||||
aria-describedby="passwordValid">
|
||||
</div>
|
||||
{{if .PasswordErr}}
|
||||
<small id="passwordValid" style="color: #f44336;" class="form-text">{{.PasswordErr}}</small>
|
||||
{{end}}
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-block">提交</button>
|
||||
</form>
|
||||
{{if .Summary}}
|
||||
<div class="py-md-5" style="color: #f44336;">
|
||||
{{.Summary}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "footer" .}}
|
||||
126
web/templates/video/edit.html.tmpl
Normal file
126
web/templates/video/edit.html.tmpl
Normal 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" .}}
|
||||
@@ -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
43
web/templates/video/transfer.html.tmpl
Normal 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" .}}
|
||||
Reference in New Issue
Block a user