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

说明

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

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

代码

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

下载

1. 预览地址：https://sunpma.com/other/xiaoshipin

2. 参考链接：https://www.hostloc.com/thread-662901-1-1.html