【html+css+js】如何轻松在网页中嵌入b站视频?

这篇具有很好参考价值的文章主要介绍了【html+css+js】如何轻松在网页中嵌入b站视频?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

引言

昨天心情不太好,b站看了原版《海底》N遍,后来无意中对分享处的嵌入代码起了兴趣,因为最近刚好在学web,复制过来瞄了一下,发现是iframe标签,如下所示。

<iframe src="//player.bilibili.com/player.html?aid=413672301&bvid=BV1MV41167e9&cid=208508865&page=1" 
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

 

工具:vscode+谷歌浏览器

 

尝试 

 First

 我将这段代码放入body标签内,然后运行,发现提示“该文件可能已被移至别处、修改或删除。”。(为避免侵权不展示图片,可自行尝试,下同。)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  
    <iframe src="//player.bilibili.com/player.html?aid=413672301&bvid=BV1MV41167e9&cid=208508865&page=1" scrolling="no"
    border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

</body>

</html>

Second 

本来想着找个博客速通一下,结果发现要么就讲的不是那么清晰简洁,要么就是一些已经失效的操作,最终被迫自己fighting。

瞄了下b站给的iframe标签,发现它没有加上“https:” 头,所以会导致本地调试的时候链接出错,加上后即可链接成功。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  
    <iframe src="https://player.bilibili.com/player.html?aid=413672301&bvid=BV1MV41167e9&cid=208508865&page=1" scrolling="no"
    border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

</body>

</html>

 Final

 链接是成功了,但是你会发现,视频简直迷你,画面非常的小......

 好吧,再研究一下,查阅了不少博客,具体的过程就不说了,直接说结果吧。

 加上一个css样式控制宽度,再加上一个js控制高度即可。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #bili-radio {
      width: 100%;
    }
  </style>
</head>

<body>

  <iframe id="bili-radio"
    src="https://player.bilibili.com/player.html?aid=413672301&bvid=BV1MV41167e9&cid=208508865&page=1"
    scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

  <script>
    document.getElementById("bili-radio").style.height = document.getElementById("bili-radio").scrollWidth * 0.76 + "px";
  </script>

</body>

</html>

 

听不太懂也没关系,直接用b站给的iframe标签替换即可。

 

 扩展

 查阅资料的过程中,对网址也有了些了解,aid和bvid估计是视频id;cid应该是客户端id,删去也不影响链接视频播放;page表示是选集里的第几个视频。

还了解到一些其他的,但是实测后发现现在能用的不多。

像如果要在第60秒开始,可以加入&t=60。

如果要让它自动播放的话,可以加入&autoplay=true。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #bili-radio {
      width: 100%;
    }
  </style>
</head>

<body>

  <iframe id="bili-radio"
    src="https://player.bilibili.com/player.html?aid=413672301&bvid=BV1MV41167e9&cid=208508865&page=1&t=60&autoplay=true"
    scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

  <script>
    document.getElementById("bili-radio").style.height = document.getElementById("bili-radio").scrollWidth * 0.76 + "px";
  </script>

</body>

</html>

还有一些问题,一个是画质比较低,只有360p,这个感觉没什么办法,因为需要登录;还有就是默认静音,以及弹幕默认开关的问题,这个感觉需要自己写一个js,等之后弄好了再更新。

 (by 归忆)文章来源地址https://www.toymoban.com/news/detail-770603.html

到了这里,关于【html+css+js】如何轻松在网页中嵌入b站视频?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于html/css/js的web网上书店系统网页设计大学生期末源码分享

    摘要: 随着互联网技术的发展,电子商务逐渐普及并成为人们购物的主要方式之一。本实验基于Web技术,使用HTML、CSS和JavaScript等前端技术,设计并实现了一个基于Web的书店商城系统。实现了用户和管理员两类用户的功能需求。 : Web;CSS;JavaScript;网上书店系统;

    2024年02月03日
    浏览(61)
  • web前端开发——期末大作业网页制作——web网页设计期末课程大作业 HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页

    2024年02月09日
    浏览(64)
  • 大二Web课程设计:服装网页设计题材——HTML+CSS汉服文化带背景音乐素材带视频(12页)

    🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (

    2024年01月17日
    浏览(54)
  • 【前端】关于如何将html、js、css等一个html网页打包成单一的exe可执行程序文件

    要将 HTML、JS、CSS 等一个 HTML 网页打包成单一的可执行程序文件(exe),通常需要使用一些工具和框架来实现的。 这里以Electron为例,详细说一下具体的打包过程 1.安装依赖: 确保已经安装了 Node.js。在命令行中进入你的项目目录,执行以下命令安装 Electron: 2.创建文件结构

    2024年02月11日
    浏览(57)
  • Web大学生网页作业成品 bootstrap响应式网站开发 基于HTML+CSS+JS+Bootstrap制作火锅美食网站(4页)

    🎀 精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作

    2024年02月08日
    浏览(56)
  • HTML+CSS+JS网页设计

    HTML页面主要由:登录、注册跳转页面,轮播图,家乡简介,热门景点,特色美食等组成。通过Div+CSS、鼠标滑过特效、获取当前时间,跳转页面、基本所需的知识点全覆盖。 提示:以下是本篇文章正文内容,下面案例可供参考 HTML部分:这块分为两部分,上下两个大盒子,第

    2024年02月08日
    浏览(47)
  • 甜品网页制作HTML+CSS+JS

    网页思路: 在正式编写前,给网页结构大致划分出导航栏(nav)、内容(content)、底部(footer)等div布局 布局好之后,再在CSS文件中,完整详细的补充div盒子的宽、高、背景颜色等样式。由于网页的元素分为内联元素和块状元素,有时候适当的使用display属性转换。 其实不管

    2024年02月10日
    浏览(49)
  • 中秋之美——html+css+js制作中秋网页

    八月十五,秋已过半,是为中秋。 “但愿人长久,千里共婵娟”,中秋时节,气温已凉未寒,天高气爽,月朗中天,正是观赏月亮的最佳时令。古人把圆月视为团圆的象征,因此,又称八月十五为“团圆节”。 在这个团圆夜,每个人心中都寄托着美好的祝愿,回顾自己往日

    2024年02月07日
    浏览(47)
  • 网页轮播图制作(html+css+js)

            目的:用于自己做记录,记录制作的过程以及遇到的一些问题。内容参考来自b站的up主:黑马前端 的pink老师JavaScript基础语法课程。 (1)当鼠标经过轮播图,左右两边的按钮出现,离开则隐藏按钮; (2)点击左侧按钮,图片向右播放一张,以此类推,右侧同理;

    2024年02月08日
    浏览(55)
  • web网页设计—— 中国餐饮协会(HTML+CSS)

    🎀 精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作

    2024年02月09日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包