a标签点击通过站外链接播放视频

2026年9月19日星期六·223 字·1 分钟·

-浏览量

AI 摘要- DeepSeek

添加所有页面，和上一页、具体页、下一页的按钮,设置div样式，默认第一页显示，其他页隐藏。

JS实现站外链接视频播放#

需要引入的js文件有

1
   <script src="js/jquery.js"></script><!--lightbox-video方法实现-->
2

3
   <script src="js/magnific-popup.min.js"></script><!--lightbox-video 方法实现-->
4

5
   <script src="js/script.js"></script><!--lightbox-video 标签引入-->

css样式需要引入

1
    <link href="css/global.css" rel="stylesheet"><!--    css引入标签效果-->
2
    <link href="css/magnific-popup.css" rel="stylesheet"><!--引入视频点击页面css-->

a标签需要href链接获取站外视频地址,js引用需要class绑定lightbox-video和 video-box属性 如果需要加载别的网站需要添加js中的数组链接

源码文件放在网盘 地址:https://pan.baidu.com/s/13fGNOF_JJsSbvl3noyhN1g?pwd=rnav 提取码：rnav

1
<!DOCTYPE html>
2
<html>
3
<head>
4

5
    <meta charset="utf-8">
6
    <title>链接获取站外视频播放</title>
7

8
    <link href="css/global.css" rel="stylesheet"><!--    css引入标签效果-->
9
    <link href="css/magnific-popup.css" rel="stylesheet"><!--引入视频点击页面css-->
10

11
</head>
12

13
<body>
14

15
  <a href="https://www.bilibili.com/video/BV1za411e7ij/?spm_id_from=333.999.0.0&vd_source=fdd59028a412be9546aea3619fee517d"
16
           style="position:absolute;
17
           color: #0b0b0b;
18
                  width:200px;
19
                  height:200px;
20
                 background-color:var(--black-color); " class="lightbox-video video-box">
21
              <!-- a标签通过class绑定 lightbox-video 和 video-box 属性加载视频-->
22
</a>
23
<script src="js/jquery.js"></script><!--lightbox-video方法实现-->
24

25
<script src="js/magnific-popup.min.js"></script><!--lightbox-video 方法实现-->
26

27
<script src="js/script.js"></script><!--lightbox-video 标签引入-->
28
</body>
29
</html>