前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >个人博客主题模板中怎么插入第三方视频链接

个人博客主题模板中怎么插入第三方视频链接

作者头像
李洋博客
发布2022-09-23 11:44:44
9520
发布2022-09-23 11:44:44
举报
文章被收录于专栏:李洋博客李洋博客

本站开发的博客已经陆续的添加了独立的视频接口,可以单独为博客设置合适的视频,但是总有一些网友不知道怎么添加视频,所以今天把教程记录下,主题模板均支持第三方视频链接和mp4本地链接形式,基本上来说覆盖了主流格式,简单来说只要第三方支持嵌入式(iframe)代码就可以视频在文章中添加视频,如果不支持那么没办法只能上传到本地或者CDN空间,然后获取链接添加在文章视频接口,最终的效果如图:

个人博客主题模板中怎么插入第三方视频链接 第1张
个人博客主题模板中怎么插入第三方视频链接 第1张

那么教程开始吧,以腾讯视频为例,找到你想要展示的视频,在视频下方有一个“分享”按钮,点击之后弹出窗口,我们点击“嵌入代码”,如图:

个人博客主题模板中怎么插入第三方视频链接 第2张
个人博客主题模板中怎么插入第三方视频链接 第2张

点击“嵌入代码”之后会提示我们“复制成功”,如图:

个人博客主题模板中怎么插入第三方视频链接 第3张
个人博客主题模板中怎么插入第三方视频链接 第3张

这时嵌入代码已经复制到我们的系统,我们只需要在txt或者任何地方粘贴就能获取我们腾讯视频的“嵌入代码”,粘贴之后的代码如下:

代码语言:javascript
复制
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=v3308e31l25" allowFullScreen="true"></iframe>

看到代码是“iframe”格式的嵌入代码,我们不需要全部的代码,毕竟主题模板已经继承了框架,我们只需要中间的链接部分即可,例如代码中的“https://v.qq.com/txp/iframe/player.html?vid=v3308e31l25”部分,这个代码就是我们要放在文章里的,复制这段代码,我们打开博客后台,文章编辑,新建或者编辑已经发布完成的文章,在视频接口中添加代码,以希望主题为例:

个人博客主题模板中怎么插入第三方视频链接 第4张
个人博客主题模板中怎么插入第三方视频链接 第4张

设置完成就,右侧是否自动播放可选,如果不是链接是以.mp4结尾的本地或者第三方链接则需要开启mp4链接的开关,如果不是那么就按照图中设置即可,右侧提交,回到前端的文章页面查看效果即可,当然看你会显示广告,这个没办法控制,毕竟是第三方的链接,我们只能随缘,有广告就等等,不仅仅是腾讯视频,优酷,爱奇艺,B站等等都是有嵌入代码的格式,测试来看B站是没有广告的,设置完成后直接就可以播放,如果是本地视频,不建议直接上传使用,毕竟视频的流量是身大的,所以建议上传到第三方视频站。

注意,这里还有注意下mp4格式的,不是所有的mp4格式都能直接播放,本地链接除外,第三方链接看你设置了跨域,即不是在原链接上是不能播放的,可能出现404页面或者500等页面,总之,mp4链接不能播放的就下载本地上传到第三方采用“嵌入代码”格式加入就没有什么问题了。

艾玛,绕来绕去都懵圈了吧,没事别蒙圈,我的记录完成了,自己去实际操练一番吧,有问题给我留言反馈吧,拜拜!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
内容分发网络 CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档