tianyunperfect
/
python-base--


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
							<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>视频随机播放器</title>
    <link rel="stylesheet" href="https://web.tianyunperfect.cn/simple/elementUI/index.css">
</head>

<body>
    <div id="app">
        <el-container style="height: 100vh;">
            <!-- 视频播放区域 -->
            <el-main>
                <div style="margin-bottom: 20px; display: flex; align-items: center; gap: 20px; flex-wrap: nowrap;">
                    <el-button @click="getRandomVideo" type="primary">随机播放</el-button>
                    <el-radio-group v-model="selectedFileType" size="mini" style="margin-left: 10px;">
                        <el-radio-button label="video">视频</el-radio-button>
                        <el-radio-button label="audio">音频</el-radio-button>
                        <el-radio-button label="all">全部</el-radio-button>
                    </el-radio-group>
                    <el-switch v-model="loopMode" active-text="连播" active-color="#13ce66" inactive-color="#ff4949"
                        style="margin-left: 15px;"></el-switch>

                    <el-switch v-model="infiniteLoop" active-text="循环播放" @change="toggleInfiniteLoop"
                        style="flex-shrink: 0;">
                    </el-switch>
                    <div v-if="currentFile" style="display: flex; align-items: center; flex-shrink: 0;">
                        <span style="margin-right: 10px;">当前播放：</span>
                        <div style="font-weight: bold;">{{ currentFile.filename }}</div>
                        <span style="margin-left: 15px; margin-right: 10px;">权重：</span>
                        <el-input-number v-model="currentFile.weight" :min="0" :max="10" size="mini"
                            @change="updateWeight(currentFile)" style="width: 100px;">
                        </el-input-number>
                    </div>
                </div>
                <video ref="videoPlayer" controls :src="currentVideo" style="width: 100%; max-height: 80vh;" controls
                    preload="none" @ended="handleVideoEnd">
                    您的浏览器不支持视频播放
                </video>
            </el-main>

            <!-- 视频列表 -->
            <el-aside width="450px" style="background: #f5f5f5; height: 100vh;">
                <h3 style="margin-bottom: 15px;">视频列表（双击播放）</h3>
                <el-table :data="filteredFiles" stripe height="calc(100vh - 60px)" @row-dblclick="playSelected"
                    :row-class-name="tableRowClassName">
                    <el-table-column prop="filename" label="文件名"></el-table-column>
                    <el-table-column label="权重" width="150">
                        <template slot-scope="{row}">
                            <el-input-number v-model="row.weight" :min="0" :max="10" @change="updateWeight(row)"
                                size="mini">
                            </el-input-number>
                        </template>
                    </el-table-column>
                </el-table>
            </el-aside>
        </el-container>
    </div>

    <script src="https://web.tianyunperfect.cn/simple/js/vue.min.js"></script>
    <script src="https://web.tianyunperfect.cn/simple/elementUI/index.js"></script>
    <script src="https://web.tianyunperfect.cn/simple/js/axios.min.js"></script>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    files: [],
                    currentVideo: '',
                    currentVideoMD5: '',
                    loopMode: true,
                    infiniteLoop: false,
                    selectedFileType: 'video'
                }
            },
            mounted() {
                this.fetchFiles()
                // 处理页面可见性变化
                document.addEventListener('visibilitychange', () => {
                    if (document.visibilityState === 'visible') {
                        this.handlePageVisible();
                    }
                });
            },
            computed: {
                currentFile() {
                    return this.files.find(file => file.md5 === this.currentVideoMD5)
                },
                filteredFiles() {
                    const videoExts = ['mp4', 'avi', 'mov', 'mkv'];
                    const audioExts = ['aac', 'mp3', 'flac'];

                    return this.files.filter(file => {
                        const ext = file.filename.split('.').pop().toLowerCase();
                        if (this.selectedFileType === 'video') return videoExts.includes(ext);
                        if (this.selectedFileType === 'audio') return audioExts.includes(ext);
                        return true;
                    });
                },
            },
            methods: {
                // 新增方法: 页面可见时处理
                handlePageVisible() {
                    const player = this.$refs.videoPlayer;
                    if (!player) return;
                    // 记录当前播放状态
                    const wasPlaying = !player.paused;

                    player.pause();
                    if (wasPlaying) {
                        player.currentTime = player.currentTime - 0.001;
                        player.play();
                    }
                },
                // 加权随机选择方法
                getWeightedRandom(files) {
                    // 过滤掉权重为0的文件，确保它们不被选中
                    const validFiles = files.filter(file => (file.weight ?? 1) > 0);
                    if (validFiles.length === 0) return null; // 处理所有文件权重为0的情况

                    const totalWeight = validFiles.reduce((sum, file) => sum + (file.weight ?? 1), 0);
                    const random = Math.random() * totalWeight;
                    let currentSum = 0;

                    for (const file of validFiles) {
                        currentSum += file.weight ?? 1;
                        if (random <= currentSum) return file;
                    }
                    return validFiles[validFiles.length - 1];
                }, async fetchFiles() {
                    const res = await axios.get('/files')
                    this.files = res.data
                },

                // 播放选中视频（新增）
                playSelected(row) {
                    this.currentVideoMD5 = row.md5;
                    this.currentVideo = `/play/${row.md5}?t=${Date.now()}`;

                    this.$nextTick(() => {
                        const player = this.$refs.videoPlayer;
                        player.pause();
                        player.load(); // 重新加载新源

                        player.onloadeddata = () => {
                            player.play().catch(error => {
                                this.$message.warning('需要手动点击播放（浏览器限制）');
                            });
                        };
                    });
                },

                // 权重更新（修改后）
                async updateWeight(row) {
                    try {
                        await axios.post(`/weight/${row.md5}`, {
                            weight: row.weight
                        })
                        this.$message.success('权重保存成功')
                    } catch (error) {
                        this.$message.error('保存失败')
                        console.error('保存权重失败:', error)
                    }
                },

                async getRandomVideo(forceNew = true) {
                    try {
                        if (this.infiniteLoop && this.currentVideoMD5 && !forceNew) {
                            return this.playCurrent()
                        }

                        const res = this.getWeightedRandom(this.filteredFiles);
                        this.currentVideoMD5 = res.md5
                        this.currentVideo = `/play/${res.md5}`

                        this.$nextTick(() => {
                            const player = this.$refs.videoPlayer
                            player.play().catch(error => {
                                this.$message.warning('需要手动点击播放（浏览器限制）')
                            })

                            // 根据md5找到列表中的当前视频，如果不可见就滚动到可见
                            const index = this.filteredFiles.findIndex(file => file.md5 === this.currentVideoMD5);
                            if (index !== -1) {
                                this.$nextTick(() => {
                                    const tableEl = this.$el.querySelector('.el-table__body-wrapper');
                                    const rowEl = tableEl.querySelectorAll('.el-table__row')[index];
                                    if (rowEl) {
                                        const rowTop = rowEl.offsetTop;
                                        const rowBottom = rowTop + rowEl.offsetHeight;
                                        const viewportTop = tableEl.scrollTop;
                                        const viewportBottom = viewportTop + tableEl.clientHeight;

                                        if (rowTop < viewportTop || rowBottom > viewportBottom) {
                                            tableEl.scrollTop = rowTop - tableEl.clientHeight / 2 + rowEl.offsetHeight / 2;
                                        }
                                    }
                                });
                            }
                        })
                    } catch (error) {
                        this.$message.error('获取视频失败')
                    }
                },

                // 修改后的播放当前视频方法
                playCurrent() {
                    const player = this.$refs.videoPlayer;
                    // 直接操作播放器状态而不是修改src
                    player.currentTime = 0;
                    player.play().catch(error => {
                        this.$message.warning('需要手动点击播放（浏览器限制）');
                    });
                },

                handleVideoEnd() {
                    if (this.infiniteLoop) {
                        this.playCurrent()
                    } else if (this.loopMode) {
                        this.getRandomVideo(false)
                    }
                },

                toggleInfiniteLoop() {
                    if (this.infiniteLoop && !this.currentVideoMD5) {
                        this.$message.warning('请先选择要循环的视频')
                        this.infiniteLoop = false
                    }
                },
                // 新增方法: 表格行样式
                tableRowClassName({ row }) {
                    if (row.md5 === this.currentVideoMD5) {
                        return 'current-playing-row';
                    }
                    return '';
                }
            }
        })
    </script>

    <style>
        /* 新增样式: 当前行样式 */
        .current-playing-row td {
            background-color: #b1c6ef !important;
        }
    </style>
</body>

</html>