实现iframe嵌套bilibili视频

import React, { useState, useEffect } from 'react'
import styles from './style.less'
const data = [{ name: '夜曲', vid: 'BV1tA411q7xi' },{ name: '以父之名', vid: 'BV1mp4y1C7ja' },{ name: '晴天', vid: 'BV1Ag4y1q7tP' },{ name: '七里香', vid: 'BV1AA411q7a8' },
]
const index = () =>
{const [vid, setVid] = useState('BV1tA411q7xi')  // 默认 Vidconst [underline, setUnderline] = useState(0)  // 默认切换useEffect(() =>{  // 发送数据请求 设置订阅/启动定时器 手动更改 DOM 等 ~initColor()return () =>{  // 组件卸载之前 做一些收尾工作 比如清楚定时器/取消订阅 等 ~}}, [])  // 检测数组内变量 如果为空 则监控全局const initColor = () =>{let score = new Date().getHours()let color = nullswitch (true){case score >= 18 && score <= 24:color = 'rgb(64, 123, 224,.4)'break;case score >= 12 && score <= 24:color = 'rgba(189, 22, 72, 0.4)'break;case score >= 6 && score <= 24:color = 'rgb(47, 154, 158,.4)'break;case score >= 0 && score <= 24:color = 'rgb(160, 53, 133,.4)'break;default:color = 'rgb(0, 0, 0,.4)'}return color}const liClick = (data, index) =>{setVid(data.vid)setUnderline(index)}return (<div style={{ backgroundColor: initColor() }} className={styles.container}><nav className={styles.nav}><ul>{data.map((data, index) => (<li key={index} style={underline === index ? { color: 'red' } : null} className={underline === index ? styles.underline : null} onClick={() => { liClick(data, index) }}>{data.name}</li>))}</ul></nav><a target="_blank" className={styles.github_corner} href="https://blog.csdn.net/chuan0106"><img src="https://img0.baidu.com/it/u=686268762,471219961&fm=26&fmt=auto" alt="" /></a><div className={styles.center}><iframe allowFullScreen={true} width="100%" height="450" scrolling="no"sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"src={`//player.bilibili.com/player.html?aid=541205956&bvid=${vid}&cid=208099724&page=1&as_wide=1&high_quality=1&danmaku=1`}frameBorder="0"></iframe></div></div >)
}export default index

CSS

.container {width: 100%;height: 100%;position: absolute;background-color: pink;
}.nav {margin: 25px 64px 0 0;position: absolute;right: 0;text-align: right;z-index: 10;color: #5698b5;font-size: 18px;color: #407be0
}.nav li,
.nav ul {display: inline-block;list-style: none;margin: 0;
}.nav li {position: relative;display: inline-block;margin: 0 1rem;padding: 5px 0;cursor: pointer;
}.underline::after {position: absolute;content: "";bottom: 0;right: 0;width: 100%;height: 4px;background: linear-gradient(90deg, #E40960, #3C85FF);border-radius: 2px;
}.github_corner {border-bottom: 0;position: fixed;right: 0;text-decoration: none;top: 0;z-index: 1;img {color: #fff;fill: var(--theme-color, #42b983);height: 80px;width: 80px;}
}iframe {display: block;border: 1px solid #eee;width: 1px;min-width: 100%;
}.center {width: 800px;margin-top: 200px;margin-right: auto;margin-left: auto;
}

实现iframe嵌套bilibili视频相关推荐

关于博客园内嵌入bilibili视频
原文:https://www.cnblogs.com/wkfvawl/p/12268980.html 一.原理使用iframe标签,更改其中src对应bilibili视频的aid和cid,组装新的H ...
Wordpress网页直接插入bilibili视频方法
Wordpress 网页直接插入 bilibili 视频方法先在视频页将鼠标移到分享按钮,复制下方的嵌入代码: 在文章编辑页,插入自定义 html 模块,如图: 粘贴代码: <iframe s ...
html中怎样插入视频博客园,关于博客园内嵌入bilibili视频
一.原理使用iframe标签,更改其中src对应bilibili视频的aid和cid,组装新的HTML源码,即可在文章内嵌入bilibili视频. 二.获取aid和cid aid为视频的av号,但是 ...
博客内插入bilibili视频
原理使用iframe标签,更改其中src的aid和cid,使其对应要插入的视频,即可在文章内插入bilibili视频获取cid aid即为视频的av号,cid有两种获取方式,一是通过bilibil ...
bilibili视频下载信息获取
一.开发者工具 1. 开启方式进浏览器后F12(这里以window为例,其他需要自行查询) 三个点的图标->更多工具->开发者工具(以Chrome版本 85.0.4183.121(正式版 ...
Hexo博客Next主题bilibili视频Markdown插入文章
问题及需求 B站视频无广告有弹幕,非常简洁,经常看B站视频,在文章引用B站的视频在不用插件的情况下用官方的iframe方式引入视频,默认的方式导入视频屏幕会很小一般我们都是自己改width和hei ...
最新哔哩bilibili视频弹幕播放器源码+完整无错带后台/亲测
正文: 最新哔哩bilibili视频弹幕播放器源码+完整无错带后台/亲测,此款播放器源码添加及修复了很多功能,且所有源码均本地化,不存在外链的情况,测试环境:PHP7.0+MySQL5.6 播放器跨域 ...
仿bilibili视频弹幕播放器介绍搭建
目录仿bilibili视频弹幕播放器播放器简介功能特色运行环境播放器界面展示安装步骤使用方法在线演示源码下载仿bilibili视频弹幕播放器播放器简介一款防bilibili的播 ...
iframe嵌套网页
把iframe嵌套的网页放在某一位置,只需在iframe外加个框,改变框的位置即可,如: <!doctype html> <htmllang="zh"> & ...

实现iframe嵌套bilibili视频

实现iframe嵌套bilibili视频相关推荐

最新文章

热门文章