tianyunperfect
/
python-base--


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
							<!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;"
                    @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">
                    <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()
            },
            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: {
                // 加权随机选择方法
                getWeightedRandom(files) {
                    const totalWeight = files.reduce((sum, file) => sum + (file.weight || 1), 0);
                    const random = Math.random() * totalWeight;
                    let currentSum = 0;

                    for (const file of files) {
                        currentSum += file.weight || 1;
                        if (random <= currentSum) return file;
                    }
                    return files[Math.floor(Math.random() * files.length)];
                }, 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('需要手动点击播放（浏览器限制）')
                            })
                        })
                    } 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
                    }
                }
            }
        })
    </script>
</body>

</html>