视频单页播放源码,目前博主收集来自网络。

作者 by Adminkylin / 2022-02-13 / 暂无评论 / 298 个足迹

代码简单,页面简洁,支持自动连续播放,兼容微信不用全屏就能播放,第一次打开手动点击播放;
视频链接添加到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.lanzous.com/iamjp8j
预览地址:https://oem.imwgh.com/xiaoshipin

本文作者:萧亮 Blog
本文链接:视频单页播放源码,目前博主收集来自网络。 - https://yundoudong.com/index.php/archives/106/
版权声明:如无特别声明,本文即为原创文章,仅代表个人观点,版权归 遇见数据仓库-自媒体运维工具-萧亮的程序屋-全球节点-素材工具下载-抖音数据分析-影视搜索 所有,未经允许不得转载!
本文最后更新于2022年02月13日,已超过180天没有更新。如果文章内容或图片资源失效,请告知!谢谢!下面为随机推送文章!

评论已开启

阅读足迹:298 阅读 PHP网站访客的源码编写例子
Html5定位平台代码如何做呢?博主在这里简要说明一下,非常简单!