web视频播放实例（flv/mp4)Demo写路径直接可用资源-CSDN下载

共9个文件

swf：2个

xml：2个

htm：2个

web

视频播放器

4星 · 超过85%的资源需积分: 50 191 浏览量 2013-10-14 15:46:23 上传评论 2 收藏 317KB ZIP 举报

在Web开发中，视频播放是不可或缺的一部分，尤其随着多媒体内容的普及，用户对高质量的视频体验有着越来越高的需求。本示例提供了一种简单的解决方案，即"web视频播放实例（flv/mp4) Demo"，它允许开发者直接通过写路径实现视频播放功能，无需复杂的集成过程。我们来看两种主要的视频格式——FLV和MP4。FLV（Flash Video）是Adobe Flash平台广泛支持的视频格式，曾是互联网上流媒体视频的主流格式。然而，随着HTML5的普及，MP4（MPEG-4 Part 14）格式逐渐成为新宠，因为它具有更好的跨平台兼容性和更高的压缩效率。MP4不仅被现代浏览器广泛支持，而且在移动设备上也有出色的表现，因此在web视频播放中更受欢迎。这个Demo的核心是使用一个轻量级的视频播放器，可能是JavaScript或Flash驱动的。考虑到"ckplayer"在文件列表中，我们可以推测这个实例可能采用了CKPlayer，这是一个开源的Flash和HTML5双模式的视频播放器。CKPlayer提供了丰富的API和自定义选项，可以轻松地在网页中嵌入和控制视频播放，包括播放、暂停、快进、快退、全屏等功能。 "help.htm"和"index.htm"很可能是帮助文档和主页面，它们将指导用户如何配置和使用这个视频播放器。"2.webm"文件的出现，意味着这个Demo还支持WebM格式，这是一种开放源代码的视频编码格式，旨在提供高质量、低带宽的视频流。WebM由Google发起，支持HTML5的`<video>`标签，对于那些不支持MP4（如某些旧版或非主流浏览器）的环境，WebM提供了一个很好的备选方案。在实际应用中，开发者可以通过修改"index.htm"中的代码来设置视频源（src属性），指定FLV、MP4或WebM文件的路径。CKPlayer会自动检测浏览器的兼容性，并选择合适的播放方式。此外，还可以通过CKPlayer的API进行高级定制，例如添加播放列表、控制视频质量、响应式布局等。总结来说，"web视频播放实例（flv/mp4) Demo"提供了一个简单而实用的工具，让开发者能够快速集成视频播放功能到他们的网站中，同时兼容多种视频格式，确保了广泛的用户覆盖。无论是初学者还是经验丰富的开发者，都能从中受益，提高项目开发效率。通过学习和理解这个实例，你将掌握如何利用HTML5和JavaScript实现跨平台的视频播放，以及如何优化用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

web视频浏览器(支持flv和mp4格式).zip （9个子文件）

ckplayer

language.xml 2KB

style.swf 48KB

ckplayer.swf 46KB

ckplayer.xml 13KB

ckplayer.js 31KB

OneNote Ŀ¼.onetoc2 4KB

help.htm 4KB

index.htm 1KB

2.webm 214KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>升级文档</title> <style type="text/css"> body,td,th { font-size: 14px; line-height: 22px; } p { padding-left: 20px; margin: 0px; padding-top: 5px; padding-bottom: 5px; } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } </style> </head> <body> 6.3升级说明 一：javascript部份 1、为了兼容有些版本的flashplayer对中文支持不友好的问题，所以把大部分涉及中文(主要是按钮提示文字)的部分单独分开成一个语言包(默认是language.xml)，该功能需要在风格配置文件里增加一个参数，（ckplayer.js>ckstyle()里增加language:'',ckplayer.xml里增加<language></language>）其它包含中文的地方（主要是滚动文字广告部份），在ckplayer.js中使用escape函数对期进行转码。 2、规范了ckplayer.js里代码的写法，以前是用的 var ck=new Object(),ck.属性=值的写法，现在统一成var ck={属性:值,属性2:值} 3、优化了CKobject部份函数，特别针对调用时的f值进行了判断，如果f是相对路径并且ckstyle函数里没有使用替换函数的话会自动转换成相对路径并对其进行转码操作 二：flash播放器部份 1：风格文件包现在是默认加载style.swf而不是原来的style.zip，因为有些用户或服务器对zip加载不友好。升级的方法就是把原来的style.zip改成style.swf即可，如果要修改里面的内容就再改回来 2：ckplayer.js>ckstyle()函数>setup的第29个值(ckplayer.xml里对应的是setup属性的第29个值)进行了优化，默认是0，正常状态，=1是控制栏默认是隐藏状态，只有当用户鼠标经过播放器并且播放已开始时，控制栏才会显示，=2时是控制栏永久隐藏 3：ckplayer.js>ckstyle()函数>setup(ckplayer.xml里对应的是setup属性)里增加了一个值，即第39个值，该值的功能是保证前置logo至少显示的时长，默认是0，单位毫秒。 4：修正了鼠标手型的问题，即使用鼠标手型的时候，播放器全部使用手型样式 5：修正了p=0时(播放器默认暂停)无法加载默认图片(i值)的问题 6：增加了一个控制栏缓动效果，你可以把该参数放在ckplayer.js或ckplayer.xml里，也可以放在style.zip里的style.xml里，参数是ckplayer.js>ckstyle()函数>pm_tween，ckplayer.xml里或style.zip>style.xml里是<pm_tween></pm_tween>，该参数有三个值，以style.zip>style.xml里为例<pm_tween>50,300,500</pm_tween>，第一个值是是否启用控制栏缓动，0是不启动，1是启用透明度缓动，大于1则是启用y坐标向下缓动，比如例子中的50即是向下移动50个像素。第二个参数是缓动的时间，单位毫秒，第3个参数是视频区域是否使用缓动，0是不使用，大于0时(建议最好>100)，将在播放器全屏或尺寸发生变化时使用缓动变化 7：插件的升级，插件(原来使用是：cpt += 'right.swf,2,1,-75,-100,2,0|，新的使用在末尾增加了一个参数（cpt += 'right.swf,2,1,-75,-100,2,0|'），默认是0，当=1时该插件将跟着控制栏一起使用缓动效果，即把该插件绑定到控制栏上 8：在ckplayer.js的ckstyle()函数中和ckplayer.xml里增加了一个参数：pm_fpac 该参数的作用是你可以在前台调用播放器的flashvars里使用自定义的参数来向播放器传值，这里默认的设置了一个file->f，意思是你的var falshvars={file:'视频地址'}就相当于var falshvars={f:'视频地址'} </body> </html>

评论收藏

内容反馈