排行榜 统计
  • 文章总数:12 篇
  • 评论总数:60 条
  • 分类总数:4 个
  • 最后更新:2022年10月27日

网站直接调用哔哩哔哩自适应视频教程,兼容手机端

本文阅读 2 分钟
首页 Typecho文档 正文

B 站官方视频分享代码,无法在手机端进行等比缩放的展示和播放。

站长决定写一个自适应 B 站视频调用的教程出来,分享给不会调用的小伙伴儿们。话不多说,下面上教程内容:

因为在 CSS 中无法实现等比高度,所以,我们可以借助 js 代码内容,我们可以给这个 iframe 标签加一个 id,然后再写一段对应的 js 代码,比如我们设定一个j2mmvideo的 id,则代码变为:

<iframe id="j2mmvideo" src="//player.bilibili.com/player.html?aid=969951173&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>

同时,我们还要在我们的主题 footer 中,加入以下代码

<script type="text/javascript"> 
if(document.getElementById("j2mmvideo")){
document.getElementById("j2mmvideo").style.height=document.getElementById("j2mmvideo").scrollWidth*0.64+"px";
}
</script>

这段代码的意思就是视频显示高度是宽度的 0.64 倍,经过站长调用调试发现,这个 0.64 是最佳的比例值!

调用效果如下:

到这里,我们网站调用的 B 站视频,就可以自适应了,不必担心手机端查看时因为设置了固定高度而不能正常显示了!

本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.j2mm.com/typecho-docs/14.html
-- 展开阅读全文 --
Cuteen - Typecho单栏主题
« 上一篇 01-17
Joe — 一款个人类型Typecho主题
下一篇 » 02-13

发表评论

成为第一个评论的人

作者信息

动态快讯

换一换
    请配置好页面缩略名选项

热门文章

标签TAG

热评文章