| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>视频随机播放器</title>
- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/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://unpkg.com/vue@2/dist/vue.js"></script>
- <script src="https://unpkg.com/element-ui/lib/index.js"></script>
- <script src="https://unpkg.com/axios/dist/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>
|
