必威体育Betway必威体育官网
当前位置:首页 > IT技术

网页嵌入视频(腾讯,优酷,秒拍)

时间:2019-08-28 18:40:00来源:IT技术作者:seo实验室小编阅读:88次「手机版」
 

优酷视频

前段时间做过一个视频项目,嵌入的视频有腾讯优酷秒拍,因不同的视频源在网页中嵌入的方法不一样,所以总结一下分享给大家,希望对你有所帮助。

优酷视频

优酷视频我是用iframe做的,因为这样做兼容性会更好。优酷视频的视频连接是 http://player.youku.com/embed/ + 视频的id。这样拼出来的链接就可以直接拿到视频,然后将视频链接放到iframe的src中。

注意:优酷的视频在网页开发手机模式下不能播放,但可以在手机和网页上可以播放,这点需要注意。

<iframe class="banner-video"
  src="'http://player.youku.com/embed/'+videoId"
  scrolling=no
  frameborder=0
  allowfullscreen="true"
  webkitallowfullscreen="true"

效果图:

这里写图片描述

腾讯视频

腾讯的视频因他们自己做了一些处理,一般的做法页面嵌入iframe或者是video标签对腾讯视频不好使,为了达到更好的兼容,建议接入腾讯视频api。视频链接:https://v.qq.com/iframe/player.html?vid=r0025h6007x&tiny=0&auto=0

https://v.qq.com/iframe/player.html?vid= + 视频ID + &tiny=0&auto=0

<!--腾讯视频-->

<!--html-->
<p class="banner-video" id="video-content"></p>

<!--js-->
const video = new tvp.VideoInfo();                        video.setVid('视频id');
const player = new tvp.Player();
player.create({
    width: 400,
    height: 300,
    video: video,
    modId: "video-content", /*dom id*/
    clientbar: 0,
    autoplay: 0,
    pic: '缩略图src',
});

效果图:

这里写图片描述

如果想要添加其他的事件,详情可以查看腾讯视频文档。api文档链接

秒拍视频

秒拍视频相对简单可以直接嵌入video标签,而且兼容性很好

<video id="banner-video" controls src="视频链接.MP4"></video>

效果图:

这里写图片描述

以上就是我我做过得网页嵌入视频的方法,希望我的文档对你有所帮助,如有问题欢迎交流。

相关阅读

13、犀利人气宝贝选取篇(视频)

[size=4][media=x,610,463]http://v.youku.com/v_show/id_XMzE0NzMDY0.html[/media][/size] [size=4]回复可见密码[/size][size=4

微视官方视频达人认证网址通道!详聊:腾讯微视达人认证加

1认证之后 有规则一个月发几的嘛?只能相关品类视频吗?规则~最好日更,我们是按播放量补贴,总而言之多&ldquo;播放量&rdquo;多得。真实

ofo小黄车APP上线短视频广告业务,戴威毫无理性的自救?

一段广告之后正片内容才正式开始,在互联网时代这种现象常见于优酷、爱奇艺等视频播放平台,是一种成熟的商业模式,同时也是网民们习以

autojs调用java的类库爬取bilibili视频弹幕内容,get请

/** * @功能 爬取指定bilibili视频弹幕 * @作者 家 * @感谢 内个谁, ProjectXero * @难点 不会解压gzip和deflate,再次感谢上

淘气值1000淘宝评价视频是什么意思?

我不知道大家平时有没有在意自己的淘宝淘气值,其实淘宝淘气值高对大家有很多好处。那么今天小编就来给大家说说淘气值1000淘宝评价

分享到:

栏目导航

推荐阅读

热门阅读