常用视频播放器插件汇总 |
您所在的位置：网站首页 › 播放视频需要的插件有哪些软件 › 常用视频播放器插件汇总 |
|
因为项目中需要用到视频播放，所以查了不少资料，发现各类视频播放插件真是形形色色。现就常用的几个做一个汇总，以供以后使用参考。 HTML video标签其实html中就已经提供了相对应的标签用于视频的播放。 该标签中提供了一系列的属性以及方法，来保证开发者可以更好的对视频进行操作。 Video 对象方法(摘自W3School) 方法描述addTextTrack()向视频添加新的文本轨道canPlayType()检查浏览器是否能够播放指定的视频类型load()重新加载视频元素play()开始播放视频pause()暂停当前播放的视频这里必须要提醒注意的是：video标签是HTML 5的新标签，并且IE浏览器只支持IE9及其以上版本。 参考资料：HTML video标签 /Video 对象相关属性以及方法 jQueryVideo.js其实该视频播放器插件使用的就是标签，只不过集成了很多方法，避免大家再去造轮子。 需要引入video.js的css以及js 示例 var myPlayer = videojs('my-video'); videojs("my-video").ready(function(){ var myPlayer = this; myPlayer.play(); });在初始化video以及操作视频的时候，可以参考上面video标签的相关属性以及方法，这样方便理解以及使用。 参考资料：Video.js官网/demo下载 jPlayer使用jPlayer给我的感觉就是相对复杂，但是功能强大。它可以做音频播放，视频播放，甚至是多个视频音频列表的展示。 最让人惊喜的就是它的兼容性，官网显示，它可以向下兼容到IE6。 同样的，使用前需要引入相关的css以及js 示例(以下代码都是从官方示例代码中copy出来的，可以自行下载研究) play ; ; play stop mute max volume repeat full screen ; $("#jquery_jplayer_1").jPlayer({ready: function () { $(this).jPlayer("setMedia", { title: "Big Buck Bunny", m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v", ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv", webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm", poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png" }); }, swfPath: "../../dist/jplayer", supplied: "webmv, ogv, m4v",//支持格式 size: { width: "640px", height: "360px", cssClass: "jp-video-360p" }, useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true, remainingDuration: true, toggleDuration: true });许多按钮样式都可以自行定义，官方下载插件后，在examples文件夹下有各种各样的demo可供参考。 参考资料：jPlayer官方下载地址 ckplayer超酷flv播放器插件，使用简单。除了支持mp4、flv、f4v、m3u8格式外，还支持rtmp协议。并且播放器会自动选择使用html5还是flashplayer进行播放，html5播放器优先。最主要的是用户可以自定义播放器的风格。 示例： var videoObject = { container: '.video',//'#'代表容器的ID，'.'或''代表容器的class variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象 poster:'pic/wdm.jpg',//封面图片 video:'url'//视频地址 }; var player=new ckplayer(videoObject);需要注意的是：此款播放器需要放在网络环境里方可正常使用，直接下载插件打开示例无法使用。 参考资料：ckplayer官网 Cyberplayer百度云web播放器，功能强大。不过需要在百度云平台注册获取accessKey才能使用。当然，如果你的项目文件存储使用的是百度云的话，那么配合此播放器实在是再方便不过了。 示例 var player = cyberplayer("playercontainer").setup({ width: 680, // 宽度，也可以支持百分比(不过父元素宽度要有) height: 448, // 高度，也可以支持百分比 title: "基本功能", // 标题 file: "上传百度云存放视频地址url", // 播放地址 image: "", // 预览图 autostart: false, // 是否自动播放 stretching: "uniform", // 拉伸设置 repeat: false, // 是否重复播放 volume: 100, // 音量 controls: true, // controlbar是否显示 starttime: 0, // 视频开始播放时间点(单位s)，如果不设置，则可以从上次播放时间点续播 logo: { // logo设置 linktarget: "_blank", margin: 8, hide: false, position: "top-right", // 位置 file: "./img/logo.png" // 图片地址 }, ak: "xxxxxxxxxxxxxxxx" // 公有云平台注册即可获得accessKey });有关此播放器就不过多介绍了，官方demo中写的实在是太详细了。 参考资料：百度云 CyberplayerDemo 总结以上是我能找到的几款主流的视频播放器插件，也许还有更多更好的。当然在选择时一定要结合自己的项目实际情况，然后整体统一一种风格进行使用。适合的才是最好的。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |