<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video App</title>
<script type="text/javascript" src="./js/vue/vue.global.min.js"></script>
<script src="./js/axios.min.js"></script>
<style>
.video-container {
position: relative;
display: inline-block;
margin: 10px;
}
.custom-controls {
margin-top: 5px;
}
</style>
</head>
<body>
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">固定视频</label>
<div class="content">
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">搜索视频</label>
<div id="appvideo" class="content" >
<div
style="margin: 0px; padding: 0px; border: 0px;"
v-for="(data, index) in videodtos"
:key="index">
<my-video :src="data.abs_path"
:video-id="data.id"
:dto="data"
@collectvideo="collectvideo"
@fixvideo="fixvideo">
</my-video>
</div>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">历史视频</label>
<div class="content">
stuff2
</div>
</div>
</div>
<script type="text/javascript">
Vue.component('my-video', {
template: `
<div class="video-container" style="position: relative; display: inline-block; margin: 0px;">
<video
ref="videoPlayer"
:width="videoWidth" :height="videoHeight" controls
@loadedmetadata="handleLoadedMetadata">
<source :src="src" type="video/mp4">
您的浏览器不支持 HTML5 video 标签。
</video>
<div class="custom-controls">
<button @click="$emit('collectvideo', videoId)">收藏</button>
<button @click="$emit('fixvideo', dto)">固定</button>
</div>
</div>
`,
props: ['src', 'videoId', 'dto'],
data() {
return {
videoWidth: 320,
videoHeight: 240
};
},
methods: {
handleLoadedMetadata() {
const video = this.$refs.videoPlayer;
// 把原视频缩放到窗口的1/5宽度
let resWidth = (window.innerWidth/5);
let resHeight = (resWidth/video.videoWidth)*video.videoHeight;
this.videoWidth = resWidth; // 设置实际宽度
this.videoHeight = resHeight; // 设置实际高度
// console.log({"scale":scale, "videoWidth":this.videoWidth, "videoHeight":this.videoHeight,
// "window.innerWidth":window.innerWidth
// })
this.$emit('video-loaded', { message: '视频元数据已加载', videoType: 'MP4' });
},
}
});
var appVideo = new Vue({
el: '#appvideo',
data: {
count: 0,
videodtos: []
},
methods: {
async fetchVideos() {
try {
const response = await axios.get('http://192.168.0.5:8489/listVideos?pageIndex=3');
this.videodtos = response.data.files;
console.log("fetching videos success:", response.data);
} catch (error) {
console.error('获取视频列表失败:', error);
}
},
add: function() {
this.videodtos.push({
"src": "https://www.w3schools.com/html/mov_bbb.mp4",
"id": this.count,
"name": "video" + this.count
});
this.count++;
},
collectvideo: function(videoId) {
console.log(`收藏视频 ID: ${videoId}`);
// 在这里添加收藏视频的逻辑
},
fixvideo: function(dto) {
console.log(`固定视频: ${dto.id} ${dto.abs_path}`);
// 在这里添加固定视频的逻辑
}
},
mounted() {
this.fetchVideos();
}
});
</script>
<style>
.my-grid {
display: flex;
flex-wrap: wrap; /* 允许换行 */
justify-content: center; /* 居中对齐 */
}
.grid-item {
margin: 1px; /* 视频之间的间距 */
}
/* .my-grid > div { */
/* width: calc(100% / 6); 每个按钮占据 1/6 的宽度 */
/* box-sizing: border-box; 确保内边距和边框不会影响宽度 */
/* } */
/* 自定义按钮样式 */
button {
/* padding: 10px 20px; */
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 3px;
}
.btn-default {
background-color: #ccc;
color: #333;
}
.btn-primary {
background-color: #007bff;
color: white;
}
.btn-secondary {
background-color: #6c757d;
color: white;
}
.btn-primary:hover {
background-color: #0056b3;
}
.btn-secondary:hover {
background-color: #545b62;
}
.tabs {
position: relative;
/* min-height: 4096px; This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 4px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 0px;
}
.tab [type=radio] {
display: none;
}
.content {
display: flex;
flex-wrap: wrap; /*允许换行*/
/* justify-content: center; */
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 0px 0px 0px 0px;
border: 0px solid #ccc;
margin: 0px;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
.video-container:hover .custom-controls {
display: block;
}
.custom-controls {
position: absolute;
top: 0;
width: 100%;
/* background: rgba(0, 0, 0, 0.5); */
padding: 5px;
box-sizing: border-box;
font-size: 11px;
display: none; /* 初始状态下隐藏 */
text-align: left; /* 按钮居中对齐 */
}
</style>
</body>
</html>
浙公网安备 33010602011771号