一个短视频播放单页源码

说明

代码简单,页面简洁,支持自动连续播放,兼容微信不用全屏就能播放,第一次打开手动点击播放;
视频链接添加到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://mvpsky.com/other/xiaoshipin
参考链接:https://www.hostloc.com/thread-662901-1-1.html

© 版权声明
THE END
喜欢就支持以下吧
点赞0
分享
评论 抢沙发