一个短视频播放单页源码

说明

代码简单，页面简洁，支持自动连续播放，兼容微信不用全屏就能播放，第一次打开手动点击播放；
视频链接添加到ks.txt文件中，每行一条链接地址，源码包内提供了6000条视频链接，自行添加即可；

代码

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> XJJ </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[array_rand($list)];

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

style.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 - 视频列表

http://alimov2.a.yximgs.com/upic/2017/11/05/03/BMjAxNzExMDUwMzMyMjNfMTY5OTgwMzlfMzc2OTA5MDYwOV8xXzM=_b.mp4
http://txmov2.a.yximgs.com/upic/2019/05/18/18/BMjAxOTA1MTgxODA4MTVfMTExNTkxMjA4Ml8xMzE4MTQ2NTUwOV8xXzM=_b_B9779e00de57a95b32ce7c7f1a6f5d344.mp4
http://txmov2.a.yximgs.com/upic/2019/05/18/18/BMjAxOTA1MTgxODMxMzZfMjIyNDUxMTY2XzEzMTgyNDUzOTExXzFfMw==_b_B8d23190ec90818e7b12bfaa1062a518c.mp4
http://txmov2.a.yximgs.com/upic/2019/06/10/12/BMjAxOTA2MTAxMjExNDFfNTQwMDU2NDBfMTM5MzQyMDAxNjBfMV8z_b_B83123c2961cad47d1a7214ea2524c32d.mp4
http://hwmov.a.yximgs.com/upic/2019/07/10/21/BMjAxOTA3MTAyMTI1NTFfNDM3ODZfMTUwMjY0MzU3MzJfMV8z_b_B276364034fb4756323028e2c0bc3c3e7.mp4
……
后面自行补充

下载

可以按上面的代码自行创建文件，也可直接下载源码包
源码下载：https://www.lanzoux.com/iamjp8j
参考链接：https://www.hostloc.com/thread-662901-1-1.html

版权声明：本文为原创文章，版权归 suntl.com 所有，转载请注明出处！
本文链接：https://suntl.com/825.html
友情提示：如果博客出现404或链接失效，请留言或者联系博主修复！

代码

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> XJJ </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[array_rand($list)]; header("Location: {$url}");

style.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 - 视频列表

http://alimov2.a.yximgs.com/upic/2017/11/05/03/BMjAxNzExMDUwMzMyMjNfMTY5OTgwMzlfMzc2OTA5MDYwOV8xXzM=_b.mp4 http://txmov2.a.yximgs.com/upic/2019/05/18/18/BMjAxOTA1MTgxODA4MTVfMTExNTkxMjA4Ml8xMzE4MTQ2NTUwOV8xXzM=_b_B9779e00de57a95b32ce7c7f1a6f5d344.mp4 http://txmov2.a.yximgs.com/upic/2019/05/18/18/BMjAxOTA1MTgxODMxMzZfMjIyNDUxMTY2XzEzMTgyNDUzOTExXzFfMw==_b_B8d23190ec90818e7b12bfaa1062a518c.mp4 http://txmov2.a.yximgs.com/upic/2019/06/10/12/BMjAxOTA2MTAxMjExNDFfNTQwMDU2NDBfMTM5MzQyMDAxNjBfMV8z_b_B83123c2961cad47d1a7214ea2524c32d.mp4 http://hwmov.a.yximgs.com/upic/2019/07/10/21/BMjAxOTA3MTAyMTI1NTFfNDM3ODZfMTUwMjY0MzU3MzJfMV8z_b_B276364034fb4756323028e2c0bc3c3e7.mp4 …… 后面自行补充

下载

可以按上面的代码自行创建文件，也可直接下载源码包
源码下载：https://www.lanzoux.com/iamjp8j
参考链接：https://www.hostloc.com/thread-662901-1-1.html

本文链接：https://suntl.com/825.html

友情提示：如果博客出现404或链接失效，请留言或者联系博主修复！

一个短视频播放单页源码

说明

代码

index.html - 入口页面

video.php - 随机获取视频地址

style.css - 样式

ks.txt - 视频列表

下载

发表评论取消回复

4 条评论

【分享】1300个频道及电视直播源

Adobe Photoshop CC2020 v21.1.3.190 完整破译绿色版

国外公认最好的十七个免费邮箱

HTML5 Player视频播放器源码API接口P2P加速支持MP4 M3U8

DD Windows 一键脚本（GCP谷歌云Oracle甲骨文Azure微软云OVH云）

Linux VPS Debian/Ubuntu/CentOS 网络重装一键脚本纯净安装

李宗盛《山丘》

Linux-cpufrequtils查看和修改CPU频率GHz

GDIndex基于CloudFlare搭建无服务器谷歌网盘目录网站实现直链下载

Iconfont 阿里巴巴矢量图标库 500多万个矢量图标

一个短视频播放单页源码

说明

代码

index.html - 入口页面

video.php - 随机获取视频地址

style.css - 样式

ks.txt - 视频列表

下载

说明

代码

index.html - 入口页面

video.php - 随机获取视频地址

style.css - 样式

ks.txt - 视频列表

下载

发表评论 取消回复

4 条评论

一个短视频播放单页源码

说明

代码

index.html - 入口页面

video.php - 随机获取视频地址

style.css - 样式

ks.txt - 视频列表

下载

发表评论取消回复