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

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. PHP中array_reduce()使用

    array_reduce — 用回调函数迭代地将数组简化为单一的值 给定一个数组: $ar = array(1,2,3,4,5); 如果要求得这个数组中各个元素之和. 方法一. 很自然的用foreac ...

  2. Python对象引用问题总结

    对于对象引用问题,一直是一知半解的状态,现整理以备使用. 操作不可变对象进行加减运算时,会在内存中创建新的不可变实例,不会影响原来的引用>>> c=12>>> d= ...

  3. python基础之变量和简单数据类型

    1.1 变量的命名和使用规范 变量名可以包含数字.字母.下划线,但是不能以数字开头. 变量名不能包含空格,可使用下划线来分割其中的单词. 不要将Python关键字和函数名用作变量名. 变量名应既简短又 ...

  4. jmeter属性设置

    使用${__setProperty(newuserid,1,)}函数对属性进行设置 2.使用${__P(userid)}函数在其他线程组中引用该属性 备注: 1.JMeter属性在测试脚本的任何地方都 ...

  5. JavaScript 常用正则示例

    1. trim功能(清除字符串两端空格) String.prototype.trim = function() {  return this.replace(/(^\s+)|(\s+$)/g, '') ...

  6. react在安卓下输入框被手机键盘遮挡问题

    问题概述   今天遇到了一个问题,在安卓手机上,当我要点击输入"店铺名称"时,手机软键盘弹出来刚好把输入框挡住了:挡住就算了,关键是页面还不能向上滑动,整个手机窗口被压为原来的二分 ...

  7. JAVA基础:ArrayList和LinkedList区别

    1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构. 2.对于随机访问get和set,ArrayList觉得优于LinkedList,因为LinkedList ...

  8. hdu刷题1

    1002  大数加法 #include<iostream> #include<cstring> using namespace std; int main() { ],b[]; ...

  9. springmvc项目,浏览器报404错误的问题

    问题描述: 建立了web工程,配置pom.xml,web.xml,编写controller类,在spring-mvc-servlet.xml文件中指定开启注解和扫描的包位置<mvc:annota ...

  10. 特殊符号 & 以太坊

    &表示取二进制的末尾 &1表示如果末尾是奇数和偶数两种情况 0 偶数 1奇数 举例子: int a=1;int p=&a; 其中,p是指针,&a就是将a在内存中的实际地 ...