第9课:Jquery media plugin视频播放器

在实际web项目中,肯定会有加入视频播放器的需求

现在视频播放器很多,我推荐用JQuery media plugin
主要是两点,一个是因为页面美观,功能强悍,支持多种视频格式
还有一个原因就是因为定制性很强,可以很方便的增加减少功能进行定制

使用方法:
1.加入jquery文件
<script src="js/jquery.js"></script>
<script src="js/media/jquery.media.js"></script>//这个文件可以点击页面下面的点击下载链接获取
2.确定插件位置
<a class="media"></a>
在需要显示视频播放器的地方加入这个a标签
3.初始化
<script type="text/javascript" language="javascript" charset="utf-8">
    $('.media').media({ width: '100%', height: '400', src: '视频地址', autoplay: 0, params: {allowFullScreen: 'true'}});
</script>

params: {allowFullScreen: 'true'}这个是用来设置是否允许全屏的,一般都会用到,但是默认设置是没有这项的,需要注意下

其他参数:
preferMeta: 1, // 如果为true, 则标记的meta值优先于脚本对象
autoplay: 0, // 标准化的跨播放器设置
bgColor: '#ffffff', // 背景颜色
params: {}, // 作为param元素添加到object标记中;作为属性添加到embed标记中
attrs: {}, // 作为属性添加到object以及embed中
flashvars: {}, // 作为flashvars参数或属性添加到flash中
flashVersion: '7', // 需要的最低flash版本
//默认的flash视频和mp3播放器
flvPlayer: 'mediaplayer.swf',
mp3Player: 'mediaplayer.swf',
silverlight: {
inplaceInstallPrompt: 'true', // 在适当的位置显示安装提示
isWindowless: 'true', // 无窗口模式
framerate: '24', // 最大帧速率
version: '0.9', // Silverlight版本 onError: null, // onError回调函数
onLoad: null, // onLoad回调函数
initParams: null, // 对象初始化参数
userContext: null // 传到load回调函数的参数
}

点击下载