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

引言

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

 

工具:vscode+谷歌浏览器

 

尝试 

 First

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





  
  
  Document



  
    



Second 

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

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





  
  
  Document



  
    



 Final

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

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

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





  
  
  Document
  




  

  



 

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

 

 扩展

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

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

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

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





  
  
  Document
  




  

  



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

 (by 归忆)

你可能感兴趣的:(web学习,前端,javascript,html,css,web,嵌入视频,js)