主流视频网站PC+H5网页播放器嵌入指南

2020年03月06日 14:21哈拉星球

在个人网站储存视频内容,对网站空间、维护和流量等都存在较大消耗。因此,将视频上传到爱奇艺、腾讯等主流视频网站,待内容过审后调用相关数据,在个人网站嵌入网页播放器就成为了一个不错的选择。

接下来将分享爱奇艺、腾讯、优酷、哔哩哔哩、Youtube等视频网站通过iframe嵌入能支持PC+H5网页播放器的方法:

首先你需要添加一段基础的<iframe>标签代码

<div class="video">
<iframe src="视频调用链接" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>

为保证播放器宽度适配PC和移动端,建议添加以下CSS样式

video{
    position: relative;
    width: 100%;
    height: 0;              /*高度设置这里无效,设置为0,用padding撑开div*/
    padding-bottom: 68%;    /*68%到80%都可以*/
}
.video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

接下来就根据自身需求,选择需要调用的视频网站接口,填写在<iframe>标签的src中。

爱奇艺

https://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=84d3e54213890c463c88a29bf79c27ba&tvId=2610424300

爱奇艺需同时获取vid和tvid两个字段才可调用播放器,具体方法如下:

进入视频播放页 Ctrl+U(或者右键查看网页源代码), 进入代码页面后, Ctrl+F搜索“tvid”(截图所示),将检索出来的vid和tvid填写在链接相应位置即可。(注:tvid为11位,vid为32位)


效果预览:https://www.halaplanet.com/v/5.html

优点:播放器简洁流畅,完美适配PC和移动端,功能齐全,可自由切换剧集、流畅度、倍速等;

不足:无法通过前端直接调用字段,有广告。


腾讯视频

https://v.qq.com/txp/iframe/player.html?vid=t01662frswa

腾讯视频直接获取视频播放页地址栏中的11位VID即可完成调用。

效果预览:https://www.halaplanet.com/v/21.html

优点:调用方式简单;

不足:PC版会贴入15-90s不等的片头广告,播放器下有影片推荐,易影响观感。


优酷

https://player.youku.com/embed/XNDQ5NjA0MTkwOA

优酷视频调用方法同腾讯相似,直接获取视频播放页地址栏的15位数ID即可。

优点:简单流畅,调用方便;

不足:PC和H5均存在片头广告。


哔哩哔哩

https://player.bilibili.com/player.html?aid=93796227

B站直接将aid字段替换成视频的AV号即可

效果预览:https://www.halaplanet.com/v/16.html

优点:播放器适配多端,含弹幕功能提升互动性,无广告用户体验佳;

不足:PC端播放器布局过于复杂,无法切换视频清晰度。


PS:调用网页播放器的大前提一定要遵守视频网站的相关规定哦~

视频播放器iframe
更多推荐