HTML5视频播放器&video&和音频播放器&audio&用法 – WEB骇客使用七牛上传视频调用视频播放器的推荐方案
使用七牛上传视频调用视频播放器的推荐方案
视频应用通常要求播放器具备以下的基本特性：多客户端支持。包括：PC端（Web播放）和移动端（iOS，Android等）。具备多平台支持的播放器有助于简化开发，规避平台之间的差异。&常用的音视频编码格式支持。常用编码格式主要是：视频H264；音频MP3和AAC。这些音视频格式使用广泛，兼容性较好。&常用的容器格式支持。常用容器格式包括：flv、mp4、HLS（m3u8/mpeg-ts），mp3，aac。满足这些格式，便可以覆盖大多数的应用场景。&播放数据统计。播放统计数据主要用于用户观看统计、计费、基础服务的状态分析、用户行为分析等等。&广告。广告是视频应用重要的变现手段。&外观定制。外观定制帮助音视频应用美化界面，提高用户体验。&播放器的选择可供选择的播放器很多，但能够很好地支持上述功能的播放器为数不多，常用的有：ckplayer：&&GrindPlayer：&下表罗列了这几种播放器的功能特性：&seweise palyerJW Player free+HLSProviderckplayerGrindPlayer主要格式mp4、flv、m3u8mp4、flv、m3u8mp4、flvmp4、flv、m3u8播放技术flash&html5flash&html5flash&html5flash&html5外观设置支持支持支持不支持播放列表支持支持支持支持广告支持支持支持支持统计信息支持支持支持支持字幕支持支持不支持支持DVR支持支持不支持支持直播rtmp、hlsrtmp、hlsrtmphlsHLS加密支持不支持（需premium和Enterprise版）不支持128bit收费免费/开源免费/开源（不能用于商业用途）免费开源可以看出，JW Player的功能最为完整。其免费版存在功能限制，比如没有HLS支持，但有一些开源的插件可以补充这些功能。JW Player免费版+插件的形式主要问题在于免费版不能用于商业用途。ckplayer功能很多，但缺少HLS在Web上的播放支持，所以使用上存在障碍。GrindPlayer功能比较全面些，通常的用况下，足赋使用。因此，如果可以承担一些费用的话，Premium版的JW Player是最好的选择。如果音视频应用希望使用免费的播放器，并且没有外观设置之类的需求，那么可以使用GrindPlayer。如果用户不需要HLS的支持，那么可以使用ckplayer。如果GrindPlayer和ckplayer都不能满足要求，同时又要免费，那么可以免费版JW Player+插件。但需要说明的是，这种形式可能存在法律风险，因为免费版JW Player不能用于商业用途。格式的选择音视频编码和容器格式的选择需要兼顾不同播放平台和播放器，同时还需要最少的资源消耗量和开发量。我们首先建议使用通用性较好的格式。频编码格式支持最多的应是H264，大部分的浏览器、移动端和播放器都支持这种编码格式。音频格式常见的主要是MP3和AAC，两者获得大多数的平台支持。因此，音视频应用应当尽可能以这些编码生成视频文件，以便免去进一步编码转换的麻烦。如果应用无法控制源音视频的编码，那么可以在音视频上传后使用七牛云存储的音视频转码功能，生成播放所需的音视频。容器格式相对复杂一些。不同播放平台的支持各有不同。但是，如果选择了合适的播放器，那么这方面的选择可以简单很多。一般而言，flv格式主要用于flash播放器，mp4在html5上支持较好。而移动端（iOS、Android）上，主要支持MP4和HLS。由于iOS端排斥flash，从而无法播放flv格式。如果我们希望在所有平台上使用统一的一种格式，那么只有MP4。所以，一般情况下，我们建议使用MP4作为视频播放的主要格式。MP4的不足之处在于对拖动播放（seek）支持不好。拖动播放是用户常见的一种播放行为，当用户需要跳过某些内容，或者音视频应用支持进度条打点和缩略图功能的时候，拖动播放有着非常重要的作用。正常情况下，播放器需要将MP4音视频文件缓存到拖放点，才能开始正式播放。但这会导致用户长时间等待，并且产生大量的废流量。有一些工具可以帮助服务端提供支持“?start=…”这样的参数，但在使用上存在诸多限制和问题。更有效的方式是将长视频切分成片段（通常5-10分钟一片），由一个播放列表串接起来。播放器在拖动播放时，只下载所涉及的片段，提高响应，减少废流量。但是这种长视频切片的功能需要播放器的额外支持，现有播放器对此的支持不多。捷径是使用HLS。HLS尽管通常用于直播，但也可以用于点播。其做法是将长视频切片，然后用m3u8文件建立索引，由播放器解析并且自动加载和播放。HLS的问题在于PC端的播放器支持不理想，flash播放器和桌面浏览器的html5都不原生支持HLS。因此，我们在选择播放器的时候将HLS作为重要的一种能力。在上述列出的四种播放器中，大部分都支持HLS协议。因此，我们建议用户选择其中支持Web端HLS的播放器，并且使用七牛云存储的视频切片功能，将其转换为HLS协议，简化应用的开发，提高用户体验。关于HLS播放相关支持，请参考在七牛云存储上播放HLS此外，对于有些应用，希望对于不同的用户端采用不同的音视频分辨率和码率，以适应不同的使用环境。比如，移动端采用较低的码率和音视频质量，而PC端采用较高的码率和质量。更进一步，可以允许用户根据各自不同的网络环境自动或者手动地选择音视频质量。这需要音视频播放的多码率的支持。HLS本身支持多码率音视频流，可以很方便地实现这种功能。关于HLS多码率支持，请参考如何利用七牛云存储实现HLS的多码率播放案例假设有一个视频文件： sintel_trailer.mp4，以HLS播放。需要做三件事情：将文件上传至七牛云存储。具体上传方法参考上传操作。&使用avthumb/m3u8功能将其转换成HLS媒体文件。这个转换可以在上传时使用数据预处理功能执行转换；或者在上传完成后，对其进行持久化FOP。但是，无论哪种方式，都需要使用saveas功能转码结果保存为指定的名称（需要.m3u8文件名后缀）。&将转码后的结果构造成下载URL：&&，然后放入播放器，或者播放页面的参数中。最主要给大家推荐一款免费播放插件插件地址：&demao :下面的播放页面演示了几种播放器播放样例视频：HLS：seweizhi：&GrindPlayer：&seweizhi：MP4：&seweizhi：FLV：&seweizhi：&
发表评论：
TA的最新馆藏脚本简介ckplayer网页播放视频代码是一款免费小巧功能强大定制方便的网页播放器调用代码。
特别说明：
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
各线路极速下载器通过p2p加速功能，帮助用户对于大文件能更好的加速下载。
其他普通下载点限制多线程，仅允许直接点击或另存为下载等单线程下载的软件，较适合小的文件下载！
如有侵犯您的版权，请及时联系(#换@)，我们将尽快处理。
& CopyRight , , Inc.All Rights Reserved.html5 怎么点一个按钮,播放一个相应的视频_百度知道HTML5+CSS3+jQuery制作视频播放器完全指南
发表于 17:42|
摘要：导读：毫无疑问HTML5已经是大势所趋，知名网站YouTube最近也开始推广HTML5播放器来代替Flash。虽然国内还没有完全普及HTML5浏览器，但支持HTML5的浏览器在中国浏览器市场的占有率也在不断增长中。本教程将会手把手地教你制作一个基于HTML5& CSS3& JavaScript 技术的视频播放器。
播放器最终效果预览图
导读：毫无疑问HTML5已经是大势所趋，知名视频网站YouTube在两年前就开始推广HTML5播放器来代替Flash。虽然国内还没有完全普及HTML5浏览器，但在各大本土浏览器厂商的努力下，支持HTML5的浏览器在中国浏览器市场的占有率也在不断增长中。本教程将会手把手地教你制作一个基于HTML5& CSS3& JavaScript 技术的视频播放器。
1.下载MediaElement.js
首先下载脚本文件，这是一个开源的HTML5音、视频插件，解压后你会得到3个文件&& &flashmediaelement.swf&、 &mediaelement-and-player.min.js&和 &silverlightmediaelement.xap& ，分别是使用Flash、 JavaScript和 SilverLight实现视频播放，并且新建一个&js&文件夹并把它们放进去（当然本例中并不需要 &flashmediaelement.swf& 和 &silverlightmediaelement.xap& 两个文件，可以删去。）。
2.HTML标记
首先需要链接(link)一个jQuery库，这里使用的是Google托管的jQuery库。然后我们在链接&mediaelement-and-player.min.js&文件和CSS文件。
&&&&&Video&Player&&&&&&src=&/ajax/libs/jquery/1.7.2/jquery.min.js&&&&&&&src=&js/mediaelement-and-player.min.js&&&&&&&rel=&stylesheet&&href=&css/style.css&&media=&screen&&&
当然我们还需要添加一个HTML5 video标记来创建一个视频播放器，再添加一些属性将它初始化。（注：poster是指视频的预览图）
&width=&640&&height=&267&&poster=&media/cars.png&&&&&&&src=&media/cars.mp4&&type=&video/mp4&&&
接下来我们再加入下面的代码来创建控制面板，需要添加的控制器或功能有：
alwaysShowControls & &true&则设置video控制面板永远显示，&false&则在鼠标移走后隐藏。
videoVolume & &horizontal&设置音量滑动控制器为水平
其它功能：暂停播放、前进播放、声音和全屏
&type=&text/javascript&//&&![CDATA[&$(document).ready(function()&{&&&&&$('video').mediaelementplayer({&&&&&&&&&alwaysShowControls:&true,&&&&&&&&&videoVolume:&'horizontal',&&&&&&&&&features:&['playpause','progress','volume','fullscreen']&&&&&});&});&//&]]&&
更多设置请查阅MediaElement.js的设置文档。
3.播放器基本样式设计
先修改一下样式设置：
.mejs-inner,&.mejs-inner&div,&.mejs-inner&a,&.mejs-inner&span,&.mejs-inner&button,&.mejs-inner&img&{&&&&&margin:&0;&&&&&padding:&0;&&&&&border:&none;&&&&&outline:&none;&}&
再给video container添加样式，下面的代码全部都是用来控制布局的，没有对播放器样式做任何修改。
.mejs-container&{&&&&&position:&relative;&&&&&background:�&}&&.mejs-inner&{&&&&&position:&relative;&&&&&width:&&&&&&height:&&}&&.me-plugin&{&position:&absolute;&}&&.mejs-container-fullscreen&.mejs-mediaelement,&.mejs-container-fullscreen&video,&.mejs-embed,&.mejs-embed&body,&.mejs-mediaelement&{&&&&&width:&100%;&&&&&height:&100%;&}&&.mejs-embed,&.mejs-embed&body&{&&&&&margin:&0;&&&&&padding:&0;&&&&&overflow:&hidden;&}&&.mejs-container-fullscreen&{&&&&&position:&fixed;&&&&&left:&0;&&&&&top:&0;&&&&&right:&0;&&&&&bottom:&0;&&&&&overflow:&hidden;&&&&&z-index:&1000;&}&&.mejs-background,&.mejs-mediaelement,&.mejs-poster,&.mejs-overlay&{&&&&&position:&absolute;&&&&&top:&0;&&&&&left:&0;&}&&.mejs-poster&img&{&display:█&}&
4.控制面板样式设置
让我们先从添加&播放按钮&开始：
.mejs-overlay-play&{&cursor:&pointer;&}&&.mejs-inner&.mejs-overlay-button&{&&&&&position:&absolute;&&&&&top:&50%;&&&&&left:&50%;&&&&&width:&50px;&&&&&height:&50px;&&&&&margin:&-25px&0&0&-25px;&&&&&background:&url(../img/play.png)&no-repeat;&}&
接下来再添加视频控制器布局：将它放在视频底部，高度为34px，再添加一个背景颜色，配合RGBA来设置透明度。最后给按钮添加基本样式和图元。
.mejs-container&.mejs-controls&{&&&&&position:&absolute;&&&&&width:&100%;&&&&&height:&34px;&&&&&left:&0;&&&&&bottom:&0;&&&&&background:&rgb(0,0,0);&&&&&background:&rgba(0,0,0,&.7);&}&&.mejs-controls&.mejs-button&button&{&&&&&display:█&&&&&cursor:&pointer;&&&&&width:&16px;&&&&&height:&16px;&&&&&background:&transparent&url(../img/controls.png);&}&
5.视频控制器
这一步我们要做的只是将控制器居右放置。所以首先我们将所有的按钮放到控制面板上，之后再对它们的宽度、位置和背景图片做详细的调整。
.mejs-controls&div.mejs-playpause-button&{&&&&&position:&absolute;&&&&&top:&12px;&&&&&left:&15px;&}&&.mejs-controls&.mejs-play&button,&.mejs-controls&.mejs-pause&button&{&&&&&width:&12px;&&&&&height:&12px;&&&&&background-position:&0&0;&}&&.mejs-controls&.mejs-pause&button&{&background-position:&0&-12px;&}&&.mejs-controls&div.mejs-volume-button&{&&&&&position:&absolute;&&&&&top:&12px;&&&&&left:&45px;&}&&.mejs-controls&.mejs-mute&button,&.mejs-controls&.mejs-unmute&button&{&&&&&width:&14px;&&&&&height:&12px;&&&&&background-position:&-12px&0;&}&&.mejs-controls&.mejs-unmute&button&{&background-position:&-12px&-12px;&}&&.mejs-controls&div.mejs-fullscreen-button&{&&&&&position:&absolute;&&&&&top:&7px;&&&&&right:&7px;&}&&.mejs-controls&.mejs-fullscreen-button&button,&.mejs-controls&.mejs-unfullscreen&button&{&&&&&width:&27px;&&&&&height:&22px;&&&&&background-position:&-26px&0;&}&&.mejs-controls&.mejs-unfullscreen&button&{&background-position:&-26px&-22px;&}&
6.音量滑动控制器
音量滑动控制器的设置也一样，设置好位置和大小，再添加一个圆角效果就可以了。
.mejs-controls&div.mejs-horizontal-volume-slider&{&&&&&position:&absolute;&&&&&cursor:&pointer;&&&&&top:&15px;&&&&&left:&65px;&}&&.mejs-controls&.mejs-horizontal-volume-slider&.mejs-horizontal-volume-total&{&&&&&width:&60px;&&&&&background:&#d6d6d6;&}&&.mejs-controls&.mejs-horizontal-volume-slider&.mejs-horizontal-volume-current&{&&&&&position:&absolute;&&&&&width:&0;&&&&&top:&0;&&&&&left:&0;&}&&.mejs-controls&.mejs-horizontal-volume-slider&.mejs-horizontal-volume-total,&.mejs-controls&.mejs-horizontal-volume-slider&.mejs-horizontal-volume-current&{&&&&&height:&4px;&&&&&&-webkit-border-radius:&2px;&&&&&-moz-border-radius:&2px;&&&&&border-radius:&2px;&}&
进度条的设置也同样简单，将它紧贴在控制面板上方就可以了，之后就是设置不同状态（all和loaded状态）的背景颜色。现在将它初始化为零就可以在影片播放时自动改变了。（但是你看不出来。）
.mejs-controls&div.mejs-time-rail&{&&&&&position:&absolute;&&&&&width:&100%;&&&&&left:&0;&&&&&top:&-10px;&}&&.mejs-controls&.mejs-time-rail&span&{&&&&&position:&absolute;&&&&&display:█&&&&&cursor:&pointer;&&&&&width:&100%;&&&&&height:&10px;&&&&&top:&0;&&&&&left:&0;&}&&.mejs-controls&.mejs-time-rail&.mejs-time-total&{&&&&&background:&rgb(152,152,152);&&&&&background:&rgba(152,152,152,&.5);&}&&.mejs-controls&.mejs-time-rail&.mejs-time-loaded&{&&&&&background:&rgb(0,0,0);&&&&&background:&rgba(0,0,0,&.3);&}&&.mejs-controls&.mejs-time-rail&.mejs-time-current&{&width:&0;&}&
8.进度条控制器和时间提示框
这一步就该给进度条添加一个进度条控制器和一个时间提示框，同样我们还是调整位置，设置宽度、高度和背景图片，再添加一些排版样式。
.mejs-controls&.mejs-time-rail&.mejs-time-handle&{&&&&&position:&absolute;&&&&&cursor:&pointer;&&&&&width:&16px;&&&&&height:&18px;&&&&&top:&-3px;&&&&&background:&url(../img/handle.png);&}&&.mejs-controls&.mejs-time-rail&.mejs-time-float&{&&&&&position:&absolute;&&&&&display:&none;&&&&&width:&33px;&&&&&height:&23px;&&&&&top:&-26px;&&&&&margin-left:&-17px;&&&&&background:&url(../img/tooltip.png);&}&&.mejs-controls&.mejs-time-rail&.mejs-time-float-current&{&&&&&position:&absolute;&&&&&display:█&&&&&left:&0;&&&&&top:&4px;&&&&&&font-family:&Helvetica,&Arial,&sans-serif;&&&&&font-size:&10px;&&&&&font-weight:&bold;&&&&&color:򢰪&&&&&text-align:&center;&}&&.mejs-controls&.mejs-time-rail&.mejs-time-float-corner&{&display:&none;&}&
9.绿色的已播放进度条
本教程的最后一步就是在进度条和音量滑动条上添加绿色的已播放进度条和音量显示，这个也很简单。
.mejs-controls&.mejs-time-rail&.mejs-time-current,&.mejs-controls&.mejs-horizontal-volume-slider&.mejs-horizontal-volume-current&{&&&&&background:&#82d344;&&&&&background:&-webkit-linear-gradient(top,&#82d344&0%,&#51af34&100%);&&&&&background:&-moz-linear-gradient(top,&#82d344&0%,&#51af34&100%);&&&&&background:&-o-linear-gradient(top,&#82d344&0%,&#51af34&100%);&&&&&background:&-ms-linear-gradient(top,&#82d344&0%,&#51af34&100%);&&&&&background:&linear-gradient(top,&#82d344&0%,&#51af34&100%);&}&
总结：虽然很简单，但这确实是一个很不错的开源（）视频播放器！经过设置还可以支持多种视频格式，所以它不仅仅可以被用来做网络视频播放器，如果你还愿意给它增加一些功能，甚至可以把它可以做成跨平台的本地视频播放器。
Demo下载地址：
原文链接：
本文为CSDN编译整理，未经允许不得转载。如需转载请联系。
推荐阅读相关主题：
网友评论有（0）
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章