lanmfly 发表于 2023-3-22 09:37:31

html5的video标签使得网页播放视频变得更简单


嗯,题目没什么关系,看了隔壁快抖妹妹,想起一个远古的项目:随机播放。

一个小姐姐随机播放的例子,共四个文件

index.html
video.php
sytle.css
ks.txt
下面把这四个文件抄一遍:
index.html
-------------

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charSet="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="referrer" content="never">
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>小姐姐在线随机播放</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section id="main">
      <video id="player" src="video.php" controls webkit-playsinline playsinline></video>
    </section>
    <section id="buttons">
      <button id="switch">连续: 开</button>
      <button id="next">播放下一个</button>
    </section>
    <script>
    (function (window, document) {
      if (top != self) {
            window.top.location.replace(self.location.href);
      }
      var get = function (id) {
            return document.getElementById(id);
      }
      var bind = function (element, event, callback) {
            return element.addEventListener(event, callback);
      }
      var auto = true;
      var player = get('player');
      var randomm = function () {
            player.src = 'video.php?_t=' + Math.random();
            player.play();
      }
      bind(get('next'), 'click', randomm);
      bind(player, 'error', function () {
            randomm();
      });
      bind(get('switch'), 'click', function () {
            auto = !auto;
            this.innerText = '连续: ' + (auto ? '开' : '关');
      });
      bind(player, 'ended', function () {
            if (auto) randomm();
      });
    })(window, document);
    </script>
</body>
</html>


video.php
------------

<?php

function read(...$filelist) {
    $list = [];
    foreach ($filelist as $file) {
      $handle = fopen($file, 'r');
      while (($line = fgets($handle)) !== false) {
            array_push($list, trim($line));
      }
      fclose($handle);
    }
    return $list;
}

$list = read('ks.txt');
$url = $list;

header("Location: {$url}");



sytle.css
----------

* {
    border: 0;
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

body {
    background: #000;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}


#main {
    height: calc(100vh - 60px);
    display: flex;
    justify-content: center;
    align-items: center;
}

#player {
    width: 100%;
    height: auto;
    max-height: 100%;
}

#buttons {
    height: 60px;
    padding: 10px;
}

#switch,
#next {
    background: #FFF;
    background: linear-gradient(to bottom, #FF2,#FB0);
    color: #AF2E08;
    font-size: 16px;
    font-weight: bold;
    height: 40px;
    padding: 0px 20px;
    margin: 0px 5px;
    border-radius: 20px;
}


ks.txt
--------

https://dwz.mk/FvQVNb
https://dwz.mk/Q3YBjm
https://dwz.mk/MVZVjy
http://b6i.cn/6yHq3
http://mtw.so/66fctR
http://mtw.so/6d5rQ6
http://mtw.so/6llOO4
http://mtw.so/5JKMrO
http://mtw.so/66faVz
http://mtw.so/6llPR4
http://mtw.so/6sS2VL
http://mtw.so/5YNa04
http://mtw.so/6llPRe
http://mtw.so/5Ceznr
http://mtw.so/6d5qi8
http://mtw.so/5uImiU
http://mtw.so/6d5qii
http://mtw.so/5JKMu4
http://mtw.so/6llPRI
http://mtw.so/5uImkQ
http://mtw.so/5YNa2k
http://mtw.so/6llPRS
http://mtw.so/5JKMuo
http://mtw.so/6d5qiM
http://mtw.so/6llPS2
http://mtw.so/5JKMuy
http://mtw.so/5YNa2E


嗯,抄完了。

zxjung 发表于 2023-3-23 23:06:49

本帖最后由 zxjung 于 2023-3-23 23:18 编辑

不用ks.tx核心代码 https://cfss.cc/api/?url=https://www.kuaidoushe.com/video.php?Cf=ksmm.mp4

zxjung 发表于 2023-3-24 00:31:27

//php这样打开文本不是快多了吗
$arr=file('ks.txt');
//在获取文本多少行count($arr);
//随机输出 2行代码搞定:P
$url=$arr;

lanmfly 发表于 2023-3-24 08:43:09

zxjung 发表于 2023-3-24 00:31
//php这样打开文本不是快多了吗
$arr=file('ks.txt');
//在获取文本多少行count($arr);


已经说了是“古老”的了。;P
页: [1]
查看完整版本: html5的video标签使得网页播放视频变得更简单