在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法:

1. 优酷代码嵌入

优点:简单,方便,可靠。

缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩溃的。

2. 利用<object>标签嵌入视频

优点:也比较方便,对于swf来说不错。

缺点:如果播放的是wmv格式,利用Chrome打开就搞笑了,有时候会提示你安装media player插件,有时候连个提醒都没有。也就是说跨浏览器的能力不足。

不同的视频格式还有不一样的代码,太繁琐。

3. 利用<video>标签

优点:HTML5新标签,对于手机端来说不错

缺点:HTML5<video>标签只支持三种格式,还有编码要求。另外如果要实现视频控制,如:播放尺寸,色彩,播放拖曳还得另外写js代码。

4. 利用第三方播放插件CKplayer

优点:支持大多数浏览器,还有视频控制,分享,开关灯,插入广告等等设置。如果你是js大牛还可以自行各种修改功能

缺点:我实测下来支持ckplayer最好的格式是经过H.264编码的MP4格式视频。其他的格式或多或少有些小问题。

官网地址:http://www.ckplayer.com

注意点:嵌入代码前务必下载ckplayer相关文件夹并将其放在根目录下

嵌入代码:

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
var flashvars = {
f: '/Movie/123.mp4',
c: ,
loaded: 'loadedHandler'
};
var video = ['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
CKobject.embed('ckplayer/ckplayer.swf', 'a1', 'ckplayer_a1', '', '', false, flashvars, video);
</script>

f:这里需要填入你的视频地址;

注意src地址的正确性以及embed中第一项swf地址的正确性。

如果不想在页面中暴露本地视频的地址,可以采用:

想要去掉调整,分享,开关灯设置可以:

想修改播放器正中间的LOGO(载入播放器时会出现),以及播放器右上角的LOGO可以:

更多的功能大家可以自行到官网查看开发手册。我用的就是这么多功能。希望能给那些该用什么代码在网站中嵌入视频而烦恼的码农一个方向。

【CKplayer】使用CKplayer插件在网页中嵌入视频的方法的更多相关文章

  1. 使用CKplayer插件在网页中嵌入视频的方法(常用笔记2)

    在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...

  2. 使用JWPlayer在网页中嵌入视频

    首发:个人博客,持续更新和纠错 我一直以为在网页中嵌入视频是件复杂的事,一研究才知道原来非常简单. 实际就是在页面中嵌入个控件.社区里已有很多解决方案了.jwplayer是最受欢迎的(之一).控件包括 ...

  3. 用firefox的插件下载网页中的视频

    对于网页中的一些视频,直接下载不了,可以用专用下载软件下载,也可以用firefox的NetVideohunter Video Downloader插件下载网页中的视频,方便快捷. 工具/原料   fi ...

  4. 转:HTML网页中插入视频各种方法

    现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...

  5. 【转】HTML网页中插入视频各种方法

    现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...

  6. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

  7. 网页中嵌入百度地图报错:The request has been blocked,the content must served over Https

    网页中嵌入百度地图 1.进入百度地图开发平台:http://lbsyun.baidu.com/index.php?title=jspopular 2.获取密钥:http://lbsyun.baidu. ...

  8. pc网页中嵌入百度地图

    pc网页中嵌入百度地图 1 打开百度地图生成器: http://api.map.baidu.com/lbsapi/creatmap/ 2 设置好了之后,点击获取代码,将代码粘贴到文件中保存为html文 ...

  9. 用flvplayer.swf在网页中播放视频(网页中flash视频播放的实现)

    原:http://blog.csdn.net/ricciozhang/article/details/46868201 由于公司项目的需求,需要在展示一些信息的时候能够播放视频,拿到这个要求,我就从最 ...

随机推荐

  1. docker in docker

    docker run --rm可以从一个镜像启动容器,并在容器执行完成后自动删除,这在计算任务中非常有用. 例如,我们通过以下步骤完成计算任务容器的启动: 1 将输入数据通过卷挂载方式连接到计算任务容 ...

  2. 使用redux-actions优化actions管理

    redux-actions的api很少,有三个createAction(s)  handleASction(s)   combineActions 主要用到createAction去统一管理actio ...

  3. 在Android上运用Anko和Kotlin开发数据库:SQLite从来不是一件轻松的事(KAD25)

    作者:Antonio Leiva 时间:Mar 30, 2017 原文链接:https://antonioleiva.com/databases-anko-kotlin/ 事实告诉我们:在Androi ...

  4. 204. Singleton

    Description Singleton is a most widely used design pattern. If a class has and only has one instance ...

  5. HDU 1394Minimum Inversion Number

    The inversion number of a given number sequence a1, a2, ..., an is the number of pairs (ai, aj) that ...

  6. POJ - 3259

    要判断是否有负的权值 #include<iostream> #include<stdio.h> #include<algorithm> #include<st ...

  7. Spark- 根据IP获取城市(java)

    开源 IP 地址定位库 ip2region 1.4 ip2region 是准确率 99.9% 的 IP 地址定位库,0.0x毫秒级查询,数据库文件大小只有 2.7M,提供了 Java.PHP.C.Py ...

  8. Stunnel客户端安装和配置

    声明:本文并非原创,转自华为云帮助中心的分布式缓存服务(DCS)的用户指南. 本文以公网访问华为云分布式缓存服务的Redis缓存为示例,介绍Stunnel客户端在各操作系统下的安装和配置. Stunn ...

  9. 如何借助windows的VHD引导特性实现VHD多windows系统共存

    近期,由于一些需要,需要运行3个windows系统,具体需要如何此处略去,现将实现方式共享如下. 测试环境: HP 820 G2, 4G内存, 500G SSD硬盘 windows 7 企业版 win ...

  10. 火狐metamask账号

    火狐metamask lock trophy pyramid sunny aim inmate body sense sing castle cinnamon cram