首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

调用网页视频播放器初级

随着现在小视频的兴起,越来越多的客户在做网站或添加内容的时候也会要求放一点和自己相关的视频,比如企业就会放一点企业宣传视频,如果是设计公司就会放一点在装修过程中的装修视频,因为这种比图片和文字跟吸引用户浏览,同时也说明了很多文字不好阐述的的内容,毕竟看图片文字内容你还要想象一下,视频就直接展示出来。

视频插入页面的方式基本是两种,一个是调用平台上的连接,优势在于代码简单,调用方便,不占服务器,网页运行速度快,缺点在于有广告,有第三方平台的水印,另一种就是本地视频文件通过视频播放器播放,优势视频文件更换方便,没有水印,可以自己div样式,缺点是占本地空间,打开速度和文件的大小,带宽有关系,文件格式有要求。每次上传都是转格式。使用方式更具自己情况

调用方式:

第三方调用方式(优酷、土豆,腾讯)建议在调用视频的时候加个外框的div 方便控制。

优酷/土豆:找到视频文件点击打开,看网页下面的分享,有三种方式

这里面有三种代码的方式,根据自己的实际情况而调整,注意一个地方就是电脑端和手机端会有出入,在选代码的时候一定要区分,建议选择通用代码。

腾讯视频:找到视频文件点击打开,看网页下面的分享,有两种方式

本地视频调用

视频调用的框架有好几种:html5自带的播放器代码,超酷网页视频播放器,我爱播放器,酷播官方播放器,Video.js等,常用的话也就这几个,视频格式的文件也是从swf,flv,mp4,现在主要以MP4视频文件为多。

这里主要说一下ckplayer 播放器的使用方式。(注意如果想看效果必须放服务器上运行,如果实在本地通过IIS好像不行,自己调试过没有成功)

网址可以从百度上搜索,然后有一个下载下载之后是个文件包,解压之后:

文件上传到服务器上,文件可以打开,视频可以播放。

视频的主要内容,我当初选择它的原因是文件相对较少。

插入的方式也很简单,把代码直接复制进去就可以,建议在服务器上调整。如果是针对网址的单一视频,还是比较方便。对于手机也能够适应,用起来也比较方便。

去除logo 的方式:

找到

这个js.查找logo 去掉路径地址:

注意

转格式出现的问题,针对MP4,在用格式工厂转格式的时候,大家可以注意下,在设置编码的时候,尽量选择AVC(H264)这个, MP4是网页上常用使用H264,如果选择HEVC的话转出来的视频,在电脑播放器上播放正常,但是如果通过代码,会出现没有显示播发内容,只有声音。但是也根据个人实际情况。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181221A0TRXZ00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券