Commit 740031fd authored by 15011343103's avatar 15011343103

feat: 成型了

parent 9d944887
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<body> <body>
<div class="edit-data"> <div class="edit-data">
<!-- 简单的例子,一个输入框+一个按钮,保存输入框的信息 --> <!-- 简单的例子,一个输入框+一个按钮,保存输入框的信息 -->
test: <input type="text" name="test" /> DPE 资源ID: <input type="text" name="dpe_id" />
<input id="save" type="button" value="保存" > <input id="save" type="button" value="保存" >
</div> </div>
</body> </body>
......
/* /*
window.courseware.getData(callback,key); //用于获取数据 window.courseware.getData(callback,key); //用于获取数据
...@@ -10,22 +9,22 @@ var uploadData = window.courseware.uploadData(); //上传文件必须要的参 ...@@ -10,22 +9,22 @@ var uploadData = window.courseware.uploadData(); //上传文件必须要的参
*/ */
//对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱 //对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱
var key = "h5_test"; var key = "animation_player_liu";
$(function(){ $(function(){
window.courseware.getData(function(data){ window.courseware.getData(function(data){
//数据加载完,才算页面加载完成 //数据加载完,才算页面加载完成
//获取数据 //获取数据
if(data&&data.test){ if(data&&data.dpe_id){
$("[name='test']").val(data.test); $("[name='dpe_id']").val(data.dpe_id);
} }
//绑定点击事件 //绑定点击事件
$('#save').on('click',function(){ $('#save').on('click',function(){
var test = $("[name='test']").val(); var dpe_id = $("[name='dpe_id']").val();
//保存新增或修改的数据 //保存新增或修改的数据
window.courseware.setData({test: test},function(){ window.courseware.setData({dpe_id: dpe_id},function(){
//保存数据也是异步的 //保存数据也是异步的
alert("保存成功!"); alert("保存成功!");
},key); },key);
......
This diff is collapsed.
This diff is collapsed.
{
"url": "https://teach.cdn.ireadabc.com/46a171160ac403f7fa382d532e67aaf1.mp4",
"duration": 613.16,
"size": 62206609,
"snapshotUrl": "https://teach.cdn.ireadabc.com/d8912d4ccb5147956316df2882d44804.jpg"
}
\ No newline at end of file
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
}
#app {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
}
.loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
z-index: 1000;
}
.loading i {
font-size: 40px;
margin-bottom: 20px;
}
.loading p {
font-size: 16px;
color: #fff;
}
/* 视频加载遮罩层 */
.video-loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
z-index: 100;
}
.video-loading i {
font-size: 40px;
margin-bottom: 20px;
animation: spin 1s linear infinite;
}
.video-loading p {
font-size: 16px;
color: #fff;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 视频播放器样式 */
.video-player {
width: 100%;
height: 100vh;
position: relative;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
.video-player video {
width: 100%;
height: 100%;
object-fit: contain;
}
.video-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
padding: 20px;
transition: opacity 0.3s ease;
}
.progress-bar {
width: 100%;
height: 3px;
position: relative;
cursor: pointer;
margin-bottom: 15px;
}
.progress-background {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
position: absolute;
border-radius: 1.5px;
}
.progress-current {
height: 100%;
background: #409EFF;
position: absolute;
border-radius: 1.5px;
transition: width 0.1s linear;
}
.progress-handle {
width: 12px;
height: 12px;
background: #409EFF;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: left 0.1s linear;
}
.control-panel {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 20px;
padding: 0 10px;
}
.control-panel .el-button {
padding: 0;
color: #fff;
font-size: 14px;
}
.control-panel .el-button i {
font-size: 20px;
vertical-align: middle;
}
.control-panel .el-button[disabled] {
color: rgba(255, 255, 255, 0.4);
}
.control-panel .el-button.active {
color: #409EFF;
}
.control-panel .play-button {
margin: 0 10px;
}
.control-panel .play-button i {
font-size: 24px;
}
.time-display {
color: #fff;
font-size: 14px;
}
/* 目录样式保持不变 */
.catalog-view {
padding: 20px;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
}
.catalog-header {
position: fixed;
bottom: 20px;
left: 30px;
z-index: 1000;
margin: 0;
padding: 0;
}
.catalog-header .el-button {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 20px;
font-size: 14px;
transition: all 0.2s ease;
}
.catalog-header .el-button:hover {
background: rgba(0, 0, 0, 0.7);
}
body { .catalog-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
overflow-y: auto;
}
.catalog-item {
cursor: default;
transition: all 0.3s ease;
background: #fff; background: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
border: 1px solid #EBEEF5;
overflow: hidden;
width: 200px;
flex-grow: 0;
flex-shrink: 0;
}
.catalog-item.clickable {
cursor: pointer;
}
.catalog-item.clickable:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.card-content {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 15px;
min-height: 90px;
}
.item-name {
font-size: 16px;
color: #333;
flex: 1;
margin-right: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-height: 1.4;
}
.card-indicators {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.card-indicators i {
font-size: 18px;
}
.el-icon-folder-opened {
color: #E6A23C;
}
.el-icon-video-play {
color: #409EFF;
}
.el-icon-arrow-right {
color: #909399;
}
.catalog-loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1000;
}
.catalog-loading i {
font-size: 40px;
color: #409EFF;
margin-bottom: 20px;
}
[v-cloak] {
display: none;
}
/* 循环播放图标 */
.loop-icon {
display: inline-block;
width: 24px;
height: 18px;
border: 1.5px solid currentColor;
border-radius: 9px;
position: relative;
}
.loop-icon::after {
content: '';
position: absolute;
right: -1px;
bottom: 2px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 5px 5px;
border-color: transparent transparent currentColor transparent;
} }
#test{ .loop-number {
margin: 80px; position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 11px;
font-weight: normal;
} }
\ No newline at end of file
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Video Player</title>
<title>h5-template-generator</title> <link rel="stylesheet" href="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/element-ui/theme-chalk/index.css">
<link href="./index.css" rel="stylesheet" > <script src="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/jquery-1.12.3.min.js"></script> <script src="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
<script type="text/javascript" src="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script> <script src="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/vue.min.js"></script>
<script type="text/javascript" src="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/vue.min.js"></script>
<!-- 引入样式 -->
<link href="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/element-ui/theme-chalk/index.css" rel="stylesheet">
<!-- 引入组件库 -->
<script src="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/element-ui/index.js"></script> <script src="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/element-ui/index.js"></script>
<script src="./crypto-js.min.js"></script>
<link rel="stylesheet" href="index.css">
</head> </head>
<body> <body>
<h1 id="test"></h1> <div id="app" v-cloak>
</body> <!-- 目录浏览模式 -->
<script src="./index.js"></script> <div v-if="!videoData" class="catalog-view">
<!-- Loading overlay -->
<div v-if="loading" class="catalog-loading">
<i class="el-icon-loading"></i>
<p>加载中...</p>
</div>
<div class="catalog-header" v-if="catalogStack.length > 0">
<el-button type="text" @click="goBack">
<i class="el-icon-arrow-left"></i> 返回上级
</el-button>
</div>
<div class="catalog-list">
<div v-for="item in catalogList"
:key="item.id"
class="catalog-item"
:class="{'clickable': item.has_child === '1' || item.has_courseware === 1}"
@click="handleCardClick(item)">
<div class="card-content">
<span class="item-name">{{ item.name }}</span>
<div class="card-indicators">
<i v-if="item.has_child === '1'" class="el-icon-folder-opened"></i>
<i v-else-if="item.has_courseware === 1" class="el-icon-video-play"></i>
<i v-if="item.has_child === '1'" class="el-icon-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
<!-- 视频播放模式 -->
<template v-else>
<div v-if="loading" class="loading">
<i class="el-icon-loading"></i>
<p>Loading...</p>
</div>
<div class="video-player">
<video
ref="videoPlayer"
:src="videoData.url"
:poster="videoData.snapshotUrl"
@timeupdate="onTimeUpdate"
@loadedmetadata="onVideoLoaded"
@ended="onVideoEnded"
@click="togglePlay"
></video>
<!-- 视频加载遮罩层 -->
<div class="video-loading" v-show="loading">
<i class="el-icon-loading"></i>
<p>视频加载中...</p>
</div>
<div class="video-controls" v-show="controlsVisible">
<div class="progress-bar" @click="seekVideo">
<div class="progress-background"></div>
<div class="progress-current" :style="{ width: progress + '%' }"></div>
<div class="progress-handle" :style="{ left: progress + '%' }"></div>
</div>
<div class="control-panel">
<el-button type="text" @click.stop="exitVideo">
退出
</el-button>
<el-button type="text" @click.stop="prevVideo" :disabled="!hasPrevVideo">
<i class="el-icon-arrow-left"></i>
</el-button>
<el-button type="text" @click.stop="togglePlay" class="play-button">
<i :class="isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'"></i>
</el-button>
<el-button type="text" @click.stop="nextVideo" :disabled="!hasNextVideo">
<i class="el-icon-arrow-right"></i>
</el-button>
<el-button type="text" @click.stop="toggleLoopMode" :class="{ 'active': isLoopMode }" :title="isLoopMode ? '单曲循环' : '顺序播放'">
<span class="loop-icon">
<span v-if="isLoopMode" class="loop-number">1</span>
</span>
</el-button>
</div>
</div>
</div>
</template>
</div>
<script src="index.js"></script>
</body>
</html> </html>
\ No newline at end of file
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment