短视频在线播放单页源码及教程

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

说明

  1. 代码简单,页面简洁,支持自动连续播放,兼容微信不用全屏就能播放,第一次打开手动点击播放。

  2. 视频链接添加到ks.txt文件中,每行一条链接地址,源码包内提供了6000条视频链接,自行添加即可。

代码
隐藏内容,您需要满足以下条件方可查看
End

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
……
后面自行补充

下载
隐藏内容,您需要满足以下条件方可查看
End

  1. 预览地址:https://sunpma.com/other/xiaoshipin
  2. 参考链接:https://www.hostloc.com/thread-662901-1-1.html

人已赞赏
全系教程

阿里云盾彻底卸载,屏蔽IP不再恢复

2020-6-23 21:23:11

全系教程

解决Chromium浏览器缺少Google api无法登录账号的问题

2020-6-24 9:58:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索