PHP实现获取本地视频进行随机播放
作者：互联网
创建一个文件夹，里面随便方视频文件即可
列如文件夹名字是assets代码如下
<?
$handler = opendir('./assets/mp4/');//当前目录中的文件夹下的文件夹 需要获取的目录文件夹名字
while( ($filename = readdir($handler)) !== false ) {
if($filename != "." && $filename != ".."){
//echo $filename."<br>";
$tmp[] = $filename;
}
}
closedir($handler);
//print_r($tmp);
$arr=array_rand($tmp);
$video='./assets/mp4/'.$tmp[$arr];
header("location:$video");
?>创建一个视频HTML小电视观看建议横屏视频
html代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>便携小电视 | 小k</title>
<!--为搜索引擎定义关键词-->
<meta name="keywords" content="小k">
<!--为网页定义描述内容 用于告诉搜索引擎，你网站的主要内容-->
<meta name="description" content="便携小电视 | 小k">
<!--定义网页作者-->
<meta name="author" content="小k">
<!--网站版权-->
<meta name="copyright" content="小k">
<!--指定IE和Chrome使用最新版本渲染当前页面-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!--指导浏览器如何缓存某个响应以及缓存多长时间-->
<!--no-cache:先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存
no-store:不允许缓存,每次都要去服务器上,下载完整的响应(安全措施)
public:缓存所有响应,但并非必须,因为max-age也可以做到相同效果
private:只为单个用户缓存,因此不允许任何中继进行缓存,(比如说CDN就不允许缓存private的响应)
maxage:当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求,例:max-age=60表示响应可以再缓存和重用60秒
-->
<meta http-equiv="cache-control" content="no-cache">
<!--禁止百度自动转码 用于禁止当前页面在移动端浏览时,被百度自动转码,虽然百度的本意是好的,但是转码效果很多时候却不尽人意-->
<!--meta http-equiv="Cache-Control" content="no-siteapp" /-->
<!-- 分享网页时显示的标题-QQ-->
<meta itemprop="name" content="便携小电视 | 小k" />
<!-- 分享网页时显示的缩略图-QQ-->
<meta itemprop="image" content="链接自己加" />
<!--分享网页时时显示的内容-QQ-->
<meta name="description" itemprop="description" content="便携小电视" />
<!--设置自动适应电脑和手机屏幕-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no minimal-ui">
<!--设置浏览器栏favicon图标-->
<link rel="icon" href="图标自己加" type="image/x-icon"/>
<!--定义搜索引擎爬虫的索引方式-->
<!--index,follow:可以抓取本页，而且可以顺着本页继续索引别的链接
noindex,follow:不许抓取本页，但是可以顺着本页抓取索引别的链接
index,nofollow:可以抓取本页，但是不许顺着本页抓取索引别的链接
noindex,nofollow:不许抓取本页，也不许顺着本页抓取索引别的链接
-->
<meta name="robots" content="index,follow">
<!--引入css文件-->
<link rel="stylesheet" type="text/css" href="./assets/css/style.css">
<link rel="stylesheet" href="./dms9qesqr9u.css">
<!--引入js文件-->
<!--script type="text/javascript" src="main.js"></script-->
<!--js文件暂时不需要-->
</head>
<style type="text/css">
video::-webkit-media-controls{
display:none !important;
}
</style>
<body>
<div class="centent">
<div class="main">
<!-- 电视区 -->
<div class="ds">
<!-- 电视边框 -->
<div class="ds-wk" id="bg">
<!-- 电视视频显示区 -->
<!--视频-->
<div id="vid" class="m" style="display: none;"></div><!--状态-->
<video id="video1" class="video" style="display: none;" poster="./assets/img/bg.gif">
<source src="./api.php" type="video/mp4">
<source src="./api.php" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
</div>
<!-- 电视视频显示区 -->
</div>
<!-- 电视底部增加边框 -->
<div class="ds-wk-btt">
<div class="ds-wk-btt-bz"></div>
<div class="ds-wk-btt-bz2"></div>
</div>
<!-- 遥控器区 -->
<div class="yao">
<div class="yao-an">
<!-- 开机 -->
<div class="yao-an-on" onclick="on()"><i class="iconfont icon-guanji"></i></div>
<!-- 关机 -->
<div class="yao-an-off" onclick="off()"><i class="iconfont icon-guanji"></i></div>
</div>
<!-- 音量加 -->
<div class="yao-an-yl">
<div class="yao-an-yl-jia" onclick="setHalfVolume()"><i class="iconfont icon-yinliangjia"></i></div>
</div>
<!-- 换台 -->
<div class="yao-an-ht">
<!-- 换台左 -->
<div class="yao-an-ht-zuo" onclick="ht()"><i class="iconfont icon-ziyuan1"></i></div>
<!-- 暂停和播放 -->
<div class="yao-an-ht-you" onclick="playPause()"><i id="zt" class="iconfont icon-jixu"></i></div>
<!-- 换台右 -->
<div id="ht" class="yao-an-ht-you" onclick="ht()"><i class="iconfont icon-you"></i></div>
</div>
<!-- 音量减 -->
<div class="yao-an-yl">
<div class="yao-an-yl-jian" onclick="setFullVolume()"><i class="iconfont icon-yinliangjian"></i></div>
</div>
</div>
<!-- 遥控器区 -->
<!-- 底部版权 -->
<div class="footer">
<div class="Copyright">© 2021 <a href="https://cnblogs.com/xkboi" > 小k</a>. All rights reserved.</div>
</div>
</div>
</div>
<!-- 换台 -->
<script>
function ht(){
var vidz =document.getElementById('vid').className;
if (vidz == "m") {
alert("请先开机");
}
else{
var vidz = document.getElementById('video1').src = './api.php';
document.getElementById("video1").play();
zt.className = "iconfont icon-zantingtingzhi";
}
}
</script>
<!-- 自动播放下一个视频 -->
<script>
var elevideo = document.getElementById("video1");
elevideo.addEventListener('ended', function () { //结束
console.log("播放结束");
var vidz = document.getElementById('video1').src = './api.php';
document.getElementById("video1").play();
zt.className = "iconfont icon-zantingtingzhi";
}, false);
</script>
<!--
<button onclick="playPause()">播放</button>
<button onclick="makeBig()">暂停</button>
<button onclick="setHalfVolume()" type="button">音量加</button>
<button onclick="setFullVolume()" type="button">音量减</button> -->
<!-- 开机 -->
<script>
function on(){
document.getElementById('video1').style.display='block';
var vidz = document.getElementById('vid').className = 'k';
}
</script>
<!-- 关机 -->
<script>
function off(){
document.getElementById('video1').style.display='none';
var vidz = document.getElementById('vid').className = 'm';
myVideo.pause();
zt.className = "iconfont icon-jixu";
}
</script>
<!-- 设置播放与暂停 -->
<script>
var myVideo=document.getElementById("video1");
/* var o =document.getElementById("video1").style.display; */
function playPause()
{
var vidz =document.getElementById('vid').className;
if (vidz == "m") {
alert("请先开机");
}
else{
/* 播放 */
if (myVideo.paused)
{
myVideo.play();
zt.className = "iconfont icon-zantingtingzhi";
}
else
{/* 暂停 */
myVideo.pause();
zt.className = "iconfont icon-jixu";
}
}
}
</script>
<!-- 设置音量加减 -->
<script>
myVid=document.getElementById("video1");
myVid.volume=0.2;
function setHalfVolume()
{
var yl=myVid.volume+0.01
myVid.volume=yl;
}
function setFullVolume()
{
var yl=myVid.volume-0.01
myVid.volume=yl;
}
</script>
</body>
</html>
这个css代码如下
点我展开
*{
margin: 0;
padding: 0;
}
.centent{
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
div{
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
}
.main{
width: 100%;
max-width: 960px;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
.ds{
width: 100%;
height: auto;
/* background: chocolate; */
display: flex;
flex-direction: column;
align-items: center;
}
.ds-wk{
width: 50%;
height: 250px;
background: #000000;
border:2px solid #1f1e1e;
margin-top: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.video{
width: 100%;
height: 100%;
object-fit:fill;
}
.ds-wk-btt{
width: 100%;
height: auto;
/* /* background: #1f1e1e; */
/* border:2px solid #1f1e1e; */
color: #ffffff;
display: flex;
/* justify-content: center;
align-items: center; */
justify-content: center;
}
.ds-wk-btt-bz{
width: 5px;
height: 20px;
background: #1f1e1e;
border-radius: 10px 0px 10px 0px;
transform: rotate(40deg);
margin-top: -4px;
margin-right: 80px;
}
.ds-wk-btt-bz2{
width: 5px;
height: 20px;
background: #1f1e1e;
border-radius: 0px 10px 0px 10px;
transform: rotate(-40deg);
margin-top: -4px;
margin-left: 80px;
}
/* 遥控器区 */
.yao{
width: 100%;
height: 50%;
/* background: coral; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.yao-an{
width: 30%;
height: auto;
display: flex;
justify-content: space-between;
}
.yao-an-on{
width: 50px;
height: 50px;
background: rgb(76, 175, 80);
box-shadow: 0px 5px 10px rgba(73, 72, 72, 0.3);
cursor: pointer;
border-radius: 360px;
display: flex;
justify-content: center;
align-items: center;
}
.yao-an-on:hover{
background: rgb(66, 153, 69);
}
.yao-an-on>i{
font-size: 18px;
color: #ffffff;
}
.yao-an-off{
width: 50px;
height: 50px;
background: rgb(226, 12, 12);
/* box-shadow:0px 5px 15px #a5a4a4; */
box-shadow: 0px 5px 10px rgba(73, 72, 72, 0.3);
cursor: pointer;
border-radius: 360px;
display: flex;
justify-content: center;
align-items: center;
}
.yao-an-off:hover{
background: rgb(196, 10, 10);
}
.yao-an-off>i{
font-size: 18px;
color: #ffffff;
}
/* 音量加*/
.yao-an-yl{
width: 30%;
height: auto;
display: flex;
justify-content: center;
}
.yao-an-yl-jia{
width: 50px;
height: 50px;
background: #e0e0e0;
/* box-shadow:0px 5px 15px #a5a4a4; */
box-shadow: 0px 5px 10px rgba(73, 72, 72, 0.5);
cursor: pointer;
border-radius: 360px;
display: flex;
justify-content: center;
align-items: center;
}
.yao-an-yl-jia:hover{
background: rgb(192, 189, 189);
}
.yao-an-yl-jia>i{
font-size: 18px;
color: #333232;
}
/* 换台 */
.yao-an-ht{
width: 30%;
height: auto;
display: flex;
justify-content: space-evenly;
margin-top: 20px;
margin-bottom: 20px;
}
/* 左 */
.yao-an-ht-zuo{
width: 50px;
height: 50px;
background: #e0e0e0;
/* box-shadow:0px 5px 15px #a5a4a4; */
box-shadow: 0px 5px 10px rgba(73, 72, 72, 0.5);
cursor: pointer;
border-radius: 360px;
display: flex;
justify-content: center;
align-items: center;
}
.yao-an-ht-zuo:hover{
background: rgb(192, 189, 189);
}
.yao-an-ht-zuo>i{
font-size: 18px;
color: #333232;
}
/* 右 */
.yao-an-ht-you{
width: 50px;
height: 50px;
background: #e0e0e0;
/* box-shadow:0px 5px 15px #a5a4a4; */
box-shadow: 0px 5px 10px rgba(73, 72, 72, 0.5);
cursor: pointer;
border-radius: 360px;
display: flex;
justify-content: center;
align-items: center;
}
.yao-an-ht-you:hover{
background: rgb(192, 189, 189);
}
.yao-an-ht-you>i{
font-size: 18px;
color: #333232;
}
/* 音量减*/
.yao-an-yl{
width: 30%;
height: auto;
display: flex;
justify-content: center;
}
.yao-an-yl-jian{
width: 50px;
height: 50px;
background: #e0e0e0;
/* box-shadow:0px 5px 15px #a5a4a4; */
box-shadow: 0px 5px 10px rgba(73, 72, 72, 0.5);
cursor: pointer;
border-radius: 360px;
display: flex;
justify-content: center;
align-items: center;
}
.yao-an-yl-jian:hover{
background: rgb(192, 189, 189);
}
.yao-an-yl-jian>i{
font-size: 18px;
color: #333232;
}
/* 底部版权 */
.footer{
width: 100%;
height: auto;
display: flex;
justify-content: center;
}
.Copyright{
font-size: 13px;
}
.Copyright>a{
text-decoration: none;
color: #03a9f4;
}
/* 动画区 */
/* 达到850分辨率改变 */
@media screen and (max-width:850px) {
.yao-an{
width: 40%;
height: auto;
display: flex;
justify-content: space-between;
}
.yao-an-yl{
width: 50%;
height: auto;
display: flex;
justify-content: center;
}
.yao-an-ht{
width: 40%;
height: auto;
display: flex;
justify-content: space-evenly;
margin-top: 20px;
margin-bottom: 20px;
}
.yao-an-yl{
width: 50%;
height: auto;
display: flex;
justify-content: center;
}
.ds-wk{
width: 60%;
height: 250px;
background: #000000;
border:2px solid #1f1e1e;
margin-top: 60px;
display: flex;
justify-content: center;
align-items: center;
}
}
/* 达到700分辨率改变 */
@media screen and (max-width:700px) {
.yao-an{
width: 40%;
height: auto;
display: flex;
justify-content: space-between;
}
.yao-an-yl{
width: 50%;
height: auto;
display: flex;
justify-content: center;
}
.yao-an-ht{
width: 45%;
height: auto;
display: flex;
justify-content: space-evenly;
margin-top: 20px;
margin-bottom: 20px;
}
.yao-an-yl{
width: 50%;
height: auto;
display: flex;
justify-content: center;
}
.ds-wk{
width: 80%;
height: 250px;
background: #000000;
border:2px solid #1f1e1e;
margin-top: 60px;
display: flex;
justify-content: center;
align-items: center;
}
}
/* 达到530分辨率改变 */
@media screen and (max-width:530px) {
.yao-an{
width: 50%;
height: auto;
display: flex;
justify-content: space-between;
}
.yao-an-yl{
width: 50%;
height: auto;
display: flex;
justify-content: center;
}
.yao-an-ht{
width: 55%;
height: auto;
display: flex;
justify-content: space-evenly;
margin-top: 20px;
margin-bottom: 20px;
}
.yao-an-yl{
width: 50%;
height: auto;
display: flex;
justify-content: center;
}
.ds-wk{
width: 95%;
height: 200px;
background: #000000;
border:2px solid #1f1e1e;
margin-top: 60px;
display: flex;
justify-content: center;
align-items: center;
}
}
/* 达到400分辨率改变 */
@media screen and (max-width:400px) {
.yao-an{
width: 70%;
height: auto;
display: flex;
justify-content: space-between;
}
.yao-an-yl{
width: 50%;
height: auto;
display: flex;
justify-content: center;
}
.yao-an-ht{
width: 75%;
height: auto;
display: flex;
justify-content: space-evenly;
margin-top: 20px;
margin-bottom: 20px;
}
.yao-an-yl{
width: 50%;
height: auto;
display: flex;
justify-content: center;
}
.ds-wk{
width: 95%;
height: 200px;
background: #000000;
border:2px solid #1f1e1e;
margin-top: 60px;
display: flex;
justify-content: center;
align-items: center;
}
}
/* 达到300分辨率改变 */
@media screen and (max-width:300px) {
.yao-an{
width: 80%;
height: auto;
display: flex;
justify-content: space-between;
}
.yao-an-yl{
width: 50%;
height: auto;
display: flex;
justify-content: center;
}
.yao-an-ht{
width: 90%;
height: auto;
display: flex;
justify-content: space-evenly;
margin-top: 20px;
margin-bottom: 20px;
}
.yao-an-yl{
width: 50%;
height: auto;
display: flex;
justify-content: center;
}
.ds-wk{
width: 95%;
height: 200px;
background: #000000;
border:2px solid #1f1e1e;
margin-top: 60px;
display: flex;
justify-content: center;
align-items: center;
}
}
这个css代码如下
点我展开
@font-face {
font-family: "iconfont"; /* Project id 1092713 */
src: url('字体自己加') format('woff2'),
url('字体自己加') format('woff'),
url('字体自己加') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-jixu:before {
content: "\e68b";
}
.icon-zantingtingzhi:before {
content: "\e6c4";
}
.icon-zantingtingzhi1:before {
content: "\e63c";
}
.icon-ziyuan1:before {
content: "\e636";
}
.icon-yinliangjia:before {
content: "\e637";
}
.icon-yinliangjian:before {
content: "\e639";
}
.icon-you:before {
content: "\e7e0";
}
.icon-guanji:before {
content: "\e687";
}
.icon-gengduo1:before {
content: "\e62b";
}
.icon-gengduo2:before {
content: "\e62d";
}
.icon-gengduo3:before {
content: "\e630";
}
.icon-gengduo4:before {
content: "\e657";
}
.icon-gengduobeifen:before {
content: "\e633";
}
.icon-gengduo5:before {
content: "\e634";
}
.icon-gengduo:before {
content: "\e629";
}
.icon-yanjing:before {
content: "\e6af";
}
.icon-icon-arrow-bottom2:before {
content: "\e668";
}
.icon-xinlangweibo:before {
content: "\e627";
}
.icon-wode3:before {
content: "\e628";
}
.icon-wangluo1:before {
content: "\e626";
}
.icon-huiyuan2:before {
content: "\e8c5";
}
.icon-qq:before {
content: "\e625";
}
.icon-huiyuan:before {
content: "\e624";
}
.icon-dingwei:before {
content: "\e6ad";
}
.icon-bi:before {
content: "\e623";
}
.icon-qianming:before {
content: "\e69f";
}
.icon-txt:before {
content: "\e615";
}
.icon-mp:before {
content: "\e61d";
}
.icon-zip:before {
content: "\e65b";
}
.icon-yasuobao:before {
content: "\e61e";
}
.icon-txt1:before {
content: "\e66c";
}
.icon-MP:before {
content: "\e61f";
}
.icon-f-mp4:before {
content: "\e620";
}
.icon-exe:before {
content: "\e622";
}
.icon-apk:before {
content: "\e643";
}
.icon-MP3:before {
content: "\e644";
}
.icon-zip-1:before {
content: "\e7ac";
}
.icon-xinjiantianjiabiaodanyemian:before {
content: "\e7aa";
}
.icon-shuaxin:before {
content: "\e65a";
}
.icon-shangchuan:before {
content: "\e67a";
}
.icon-wenjianjia:before {
content: "\e7a7";
}
.icon-icon-test:before {
content: "\e613";
}
.icon-fenxiang2:before {
content: "\e6a7";
}
.icon-ziyuan:before {
content: "\e611";
}
.icon-tuichu:before {
content: "\e612";
}
.icon-shanchu:before {
content: "\e6cd";
}
.icon-icon7:before {
content: "\e667";
}
.icon-quanbu-copy:before {
content: "\e64f";
}
.icon-tongji:before {
content: "\e64a";
}
.icon-shezhi1:before {
content: "\e63b";
}
.icon-tongji1:before {
content: "\e610";
}
.icon-mimaffffffpx:before {
content: "\e60d";
}
.icon-chenggong:before {
content: "\e666";
}
.icon-unie737:before {
content: "\e61b";
}
.icon-yijianyufankui:before {
content: "\e642";
}
.icon-tishi:before {
content: "\e718";
}
.icon-tongzhi1:before {
content: "\e614";
}
.icon-guaduan:before {
content: "\e616";
}
.icon-hanhan-01-011:before {
content: "\e694";
}
.icon-gouwu:before {
content: "\e7ed";
}
.icon-tupian:before {
content: "\e747";
}
.icon-aislogo:before {
content: "\e607";
}
.icon-diannao:before {
content: "\e632";
}
.icon-zhinengpinghengkongzhi:before {
content: "\e60a";
}
.icon-xiaolian:before {
content: "\e688";
}
.icon-wangluo:before {
content: "\e870";
}
.icon-radio-off:before {
content: "\ea6b";
}
.icon-yuyin:before {
content: "\e6c1";
}
.icon-shandian:before {
content: "\e65c";
}
.icon-hanhan-01-01:before {
content: "\e67c";
}
.icon-weibo:before {
content: "\e619";
}
.icon-bilibili-fill1:before {
content: "\e62a";
}
.icon-youjian:before {
content: "\e6db";
}
.icon-zuanshi1:before {
content: "\e714";
}
.icon-pingmu-screen:before {
content: "\e62f";
}
.icon-dengluyonghu:before {
content: "\e609";
}
.icon-bilibili-fill:before {
content: "\e93e";
}
.icon-zan:before {
content: "\e672";
}
.icon-cai:before {
content: "\e635";
}
.icon-cai1:before {
content: "\e68f";
}
.icon-zan1:before {
content: "\e601";
}
.icon-kongjian:before {
content: "\e618";
}
.icon-iconset0239:before {
content: "\e68a";
}
.icon-xiangji:before {
content: "\e631";
}
.icon-lianjie:before {
content: "\e60c";
}
.icon-lianjie-copy:before {
content: "\e7df";
}
.icon-mima:before {
content: "\e63a";
}
.icon-wode1:before {
content: "\e602";
}
.icon-bianpinghuatubiaosheji-:before {
content: "\e62e";
}
.icon-bianpinghuatubiaosheji-1:before {
content: "\e638";
}
.icon-tongzhi:before {
content: "\e6e5";
}
.icon-agenda_view:before {
content: "\e7dc";
}
.icon-agenda_view_outlined:before {
content: "\e7dd";
}
.icon-iconfontfanhui2-copy:before {
content: "\e760";
}
.icon-iconfontfanhui2:before {
content: "\e621";
}
.icon-qianbao:before {
content: "\e722";
}
.icon-homepage1:before {
content: "\e617";
}
.icon-homepage_fill:before {
content: "\e60b";
}
.icon-wode:before {
content: "\e6a2";
}
.icon-weidenglu:before {
content: "\e6a3";
}
.icon-wode-copy:before {
content: "\e7de";
}
.icon-integral_fillx:before {
content: "\e75f";
}
.icon-integral:before {
content: "\e60f";
}
.icon-biz-appstore-o:before {
content: "\e600";
}
.icon-biz-appstore:before {
content: "\e605";
}
.icon-gongdan:before {
content: "\e6a4";
}
.icon-gongdan1:before {
content: "\e6a5";
}
.icon-tubiaozhizuomoban-:before {
content: "\e62c";
}
.icon-wendang2:before {
content: "\e606";
}
.icon-homepage:before {
content: "\e603";
}
.icon-zuanshi:before {
content: "\e604";
}
.icon-wo:before {
content: "\e735";
}
.icon-fenxiang:before {
content: "\e608";
}
.icon-xuansucai:before {
content: "\e69d";
}
.icon-xinxi:before {
content: "\e641";
}
.icon-fenxiang1:before {
content: "\e648";
}
.icon-shuju:before {
content: "\e61a";
}
.icon-shezhi:before {
content: "\e61c";
}
.icon-vip:before {
content: "\e659";
}
.icon-fuzhi:before {
content: "\e742";
}
.icon-shoucang:before {
content: "\e653";
}
.icon-wd:before {
content: "\e60e";
}
.icon-shoucang1:before {
content: "\e65d";
}所用到的缩略图如下
对应的名称按顺序如下
666.gif
bg.gif
bg.png
bg2.jpg
可在html代码中快速查找关键词随后添加
部分图片暂不需要添加看自己所需
不需要的=添加的图片已经删除了是搜不到的
标签：flex,播放,icon,content,width,随机,PHP,display,before 来源： https://www.cnblogs.com/xkboi/p/16476225.html