短视频在线播放程序HTML源码

释放双眼,带上耳机,听听看~!

      如果你是一个喜欢拍抖音快手的站长,那么完全可以把自己这些视频串联起来,做成一个短视频分享程序。下面给大家分享这款短视频在线播放程序源码!

PC截图

手机端截图

演示地址:https://sp.nico.run

代码部署

1.index.html首页

新建一个文件,命名为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>

2.video.php 随机播放视频地址

新建文件命名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}");

3.style.css CSS样式

新建文件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;
}

4.ks.txt 视频播放链接

新建空白文件,命名为ks.txt,之后,放置你的自己拍摄的短视频的视频地址

http://wuzuhua.cn/1.mp4
[video  src="http://wuzuhua.cn/2.mp4" /]
[video  src="http://wuzuhua.cn/3.mp4" /]
……
放置格式,一行一个地址即可!

安装环境

  • 服务器或虚拟主机
  • nginx1.17
  • PHP7.3

如遇觉得麻烦以为大家打包源码,登录回复评论-刷新页面下载即可!

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余

给TA打赏
共{{data.count}}人
人已打赏
网站源码

LYCMS–PHP自动采集影视程序源码

2020-6-26 0:17:38

网站源码

美图写真手机壁纸自动采集PHP源码

2020-7-3 1:43:44

30 条回复 A文章作者 M管理员
  1. family

    没有任何力量能毁了下一代,除了不懂时代的上一代。可以,不错

  2. 111111

    一别之后,两地相思,只道是三四月,又谁知五六年。

  3. 111111

    出入相友,守望相助。

  4. 赚钱有道

    你的笑容怡人如晚霞般,在川流不息的时光中,神采飞扬。

  5. 苏兴隆

    宇宙说:你所斗争醉后不知天在水,满船清梦压星河的黑暗就在你心中,你所寻找的光明就在你心中。

  6. 郁闷

    醉后不知天在水,满船清梦压星河。

  7. ÿĀ陈ÿĀ

    😤😖😜😱

  8. 飘香的羽毛

    不错的东东,谢谢

  9. linyu

    支持一下

  10. shanghong

    不错不错不错

  11. 修仙人

    不错不错不错

  12. renniandong

    嗯?

  13. 清風流云

    希望能对学习php有帮助?

  14. 3769

    ?

  15. alei

    111111

  16. ↘考拉

    1

  17. TankOoO

    好东西

  18. Cheilins

    好东西

  19. 逗

    ?

  20.  2240

    牛掰

  21. 挽风

    支持一下

  22. az123456

    9999999

  23. 纯纯粹粹

    好东西好东西

  24. netxfire

    不错,收藏了

  25. 哆哩哆嗦

    好东西

  26. 雨晨

    ✗棒棒的✗

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索