资讯频道 → Web前端
阅读更多

8顶
0踩

Web前端

原创新闻 7 个漂亮的 HTML5 多媒体播放器及源码

2012-07-11 11:33 by 见习编辑 html5_dev 评论(2) 有10721人浏览
html5 视频 音频 播放器

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

网页视频音频播放器大家并不陌生，在IE中我们可以运行ActiveX来嵌入微软的Media Player或者其他的本地播放器，当然可能大部分我们都是使用Flash来制作播放器。在HTML5发展迅速的今天，让我们尝试用HTML5来制作网页播放器吧，毕竟无论是PC还是移动设备，HTML5是未来的趋势。下面向大家推荐7个使用比较广泛的HTML5视频音频播放器，希望大家喜欢。

1、HTML5音频视频播放器jPlayer

jPlayer是一款基于jQuery和HTML5的音频播放器和视频播放器，提供了2套默认的皮肤，都非常漂亮。



2、HTML5音频播放器MooTools HTML5 Audio Player

MooTools HTML5 Audio Player是一款基于HTML5技术的音频播放器，这个音频播放器支持折叠和展开，折叠时将隐藏控制按钮以节省空间。该HTML5音乐播放器还支持播放列表功能，可以方便地切换当前播放的音乐。



3、HTML5视频和音频播放器MediaElement

MediaElement是一款基于HTML5技术的视频和音频播放器，该HTML5播放器对于一些不支持HTML5的浏览器会以Silverlight或者Flash的形式展示。支持 WordPress、Drupal, Joomla、jQuery和 BlogEngine.NET、ruby gem、plone插件。



4、HTML5音乐播放器ZEN Audio Player

ZEN Audio Player是一款基于HTML5技术的音乐播放器，同时它也是基于jPlayer重写而成的音频播放器。ZEN Audio Player外观是环形的，是一个非常个性的音乐播放器。Chrome下展示效果最佳。



5、HTML5视频播放器FlareVideo

FlareVideo是基于HTML5技术实现的视频播放器，FlareVideo对CSS和JS的配置十分简单，该HTML5视频播放器还支持全屏播放功能，并且支持播放器皮肤切换。



6、HTML5视频播放器VideoJS

VideoJS也是一款基于HTML5的视频播放器，VideoJS具有以下特点：

  • 开源，我们可以利用VideoJS的源码将它应用到自己的程序中，并且可以修改其源码，但要遵循开源协议。
  • 轻量级，没有使用图片。
  • 完全可以用CSS定制播放器的外观。
  • 不依赖其他脚本库。
  • 使用非常简单。
  • 不仅使用简单，扩展也非常简单。
  • 在各个浏览器之间有统一的外观。
  • 支持全屏播放。
  • 可以控制音量。
  • 遇到不支持HTML5的浏览器可以转换成FLASH来播放。


7、HTML5视频播放器Open Standard Media

Open Standard Media这款HTML5视频播放器的底层使用jQuery框架写的，同时支持多种格式的视频和音频的播放。并且这个HTML5视频播放器支持播放列表。目前这款HTML5播放器遵循PGL V3的开源协议，所以我们可以放心地使用它并修改其源码来定制的实际需求。

8
顶
0
踩
评论 共 2 条 请登录后发表评论
2 楼 闯一个世界 2012-07-12 20:34
   
1 楼 ibobo99 2012-07-11 15:25
[/b][b][/b][b][b][/b][imgimg]" target="_blank">[url][url][url][url][/b][b][/b][b][b][/b][imgimg][/url][/url][/url][/url]" />[/b][b][/b][b][b][/b][imgimg]" target="_blank">[url][url][url][url][/b][b][/b][b][b][/b][imgimg][/url][/url][/url][/url]" wmode="" quality="high" menu="false" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="200">[/flash][/flash][/flash][/flash]

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • html+css+js实现漂亮网页

    html+javascript+css实现漂亮网页，效果非常好

  • 移动端实现HTML5 mp3录音踩坑指南：系统播放音量变小、一些机型录音断断续续 之 MediaRecorder和AudioWorklet的终极对决

    Recorder H5录音开源库群里有用户反馈手机上录音有bug，前后反馈过来几段测试过程完整录像；分析后初步发现在他那个手机上表现确实是断断续续的，从而音质非常差；此版本的Recorder采用的浏览器或接口对。但用另外一个录音库录制的却没有这个问题，当时初步分析了下一，发现在手机上使用的是来录制webm格式音频，底层使用的是浏览器的接口对返回的音频流进行音频采集。......

  • 关于PCM音频数据的相关转换算法

    原文地址：https://www.codeproject.com/articles/501521/how-to-convert-between-most-audio-formats-in-net 没有翻译了，不过相信大家阅读和理解应该没什么问题的，都是比较简单的英语。我这里主要是记录下这篇文章，以后可以随时查阅 A comprehensive guide to decoding and ...

  • WebRTC-audio_codecs音频编解码

    目录 AudioCodecSpec AudioEncoder AudioDecoderFactory AudioDecoder AudioDecoderFactory AudioCodecSpec SdpAudioFormat //音频编解码SDP特性 名称 时钟频率 通道数 参数列表 AudioCodecInfo //音频编解码信息 采样频率 通道数 码率 是否容许舒适噪声 是否支持音频网络适配 ...

  • 使用CODECs压缩Wave音频

    google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//<script type="text/javascript"

  • HTML做一个简单漂亮的宠物网页（纯html代码）

    ️HTML宠物网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和...

  • 使用HTML实现一个静态页面（含源码）

    关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星...️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒

  • 用HTML+CSS做一个漂亮简单的个人音乐网页

    ️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和...

  • 用HTML+CSS做一个漂亮简单的音乐网站

    ️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和...

  • VC 调 用ACM 音 频 压 缩 编 程 接 口 的 方 法

    ---- 音 频 和 视 频 数 据 是 大 多 数 多 媒 体 应 用 程 序 向 用 户 提 供 信 息 的 主 要 方 式， 这 些 数 据 一 般 具 有 较 高 的 采 样 速 率， 如 果 不 经 过 压 缩 的 话， 保 存 它 们 需 要 消 耗 大 量 的 存 贮 空 间， 在 网 络 上 进 行 传 输 的 效 率 也 很 低， 因 此 音 频 视 频 数 字 压 缩 编 码

  • 通过ACM将wav转换成Windows GSM 6.10

    #include #include #include #include #include #pragma comment(lib, "Msacm32.lib")WAVEFORMATEX *pwfSrc;WAVEFORMATEX *pwfDrv;HACMDRIVERID hadid_GSM610 = NULL;int n = 0;#define ADDHEAD

  • MP3 互相转换 WAV (无需任何第三方dll)

    一：MP3转换为WAVfunction acmDriverEnumCallback(hadid: HACMDRIVERID; dwInstance: DWORD; fdwSupport: DWORD): BOOL; stdcall;var  driver                                                    : HACMDRIVER;  deta

  • 精妙无比 8款HTML5动画实例及源码

    另外值得注意的是，这款jQuery菜单的每一个菜单项都可以定义一些漂亮的小图标，确实是一款很实用的jQuery菜单，尽管外观不怎么华丽。 在线演示 源码下载 2、HTML5/CSS3图片网格动画特效 HT...

  • 用HTML+CSS做一个漂亮简单大学生校园班级网页

    ️HTML我的班级网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字...

  • 使用html+css实现一个静态页面（含源码）

    1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页...

  • 【网页期末作业】用HTML+CSS做一个漂亮简单的学校官网

    顶部导航及底部区域背景色为100%宽度，主体内容区域宽度 一套优质的网页设计应该包含 (具体可根据个人要求而定)网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。...

  • 易语言在线播放器源码php,易语言视频播放器源代码

    用简单的语言编写视频播放器的源代码源代码包含以下功能: *调用Thunder APlayer SDK进行视频播放*自动检测是否下载Thunderbolt解码库，如果不存在，则自动下载并解压缩(新手可以学习)新手可以学习)*支持快捷键可快进...

Global site tag (gtag.js) - Google Analytics