`

使用MediaElement.js构建个性的HTML5音频和视频播放器

阅读更多

日期:2012-5-2  来源:GBin1.com

使用MediaElement.js构建个性的HTML5音频和视频播放器

在线演示1   在线演示2   本地下载

越 来越多的浏览器开始支持HTML5中的音频和视频标签了,现在我们可以方便的使用HTML5标签来开发基于web的应用。 可能有的朋友会问,那么对于以前的老版本浏览器,使用最新的HTML5标签,无法正常识别吧? 没错,今天我们这里将介绍一个HTML5的音频和视频播放器类库 - MediaElement.js ,通过使用这个类库,我们可以方便添加对于老版本浏览器的支持,而无须担心使用最新HTML5的兼容性问题,希望大家喜欢!

什么是MediaElement.js?

MediaElement是一个HTML音频和视频解决方案,你可以:

  • 使用HTML5的视频和音频标签及其CSS生成播放器
  • 对于老的浏览器,使用自定义的Flash和Silverlight播放器来模拟HTML5
  • 支持众多应用的插件,jQuery,Wordpress,Drupel,Joomla等等

使用MediaElement.js构建个性的HTML5音频和视频播放器

如何工作?

添加脚本:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/mediaelement-and-player.js"></script>

如果你使用MediaElement.js提供的CSS,你可以导入如下CSS:

<link rel="stylesheet" href="mediaelementplayer.css" />

javascript代码如下:

$('video').mediaelementplayer({
    // if the <video width> is not specified, this is the default
    defaultVideoWidth: 480,
    // if the <video height> is not specified, this is the default
    defaultVideoHeight: 270,
    // if set, overrides <video width>
    videoWidth: -1,
    // if set, overrides <video height>
    videoHeight: -1,
    // width of audio player
    audioWidth: 400,
    // height of audio player
    audioHeight: 30,
    // initial volume when the player starts
    startVolume: 0.8,
    // useful for <audio> player loops
    loop: false,
    // enables Flash and Silverlight to resize to content size
    enableAutosize: true,
    // the order of controls you want on the control bar (and other plugins below)
    features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],
    // Hide controls when playing and mouse is not over the video
    alwaysShowControls: false,
    // force iPad's native controls
    iPadUseNativeControls: false,
    // force iPhone's native controls
    iPhoneUseNativeControls: false,
    // force Android's native controls
    AndroidUseNativeControls: false,
    // forces the hour marker (##:00:00)
    alwaysShowHours: false,
    // show framecount in timecode (##:00:00:00)
    showTimecodeFrameCount: false,
    // used when showTimecodeFrameCount is set to true
    framesPerSecond: 25,
    // turns keyboard support on and off for this instance
    enableKeyboard: true,
    // when this player starts, it will pause other players
    pauseOtherPlayers: true,
    // array of keyboard commands
    keyActions: []
});

你可以在不同版本或者类型浏览器下观看效果,基本都可以正常工作。注意不同浏览器支持的视频格式可能不同,所以你最好提供不同的格式的视频源。

这里我们使用自己CSS来开发个性化的播放器。

创建个性化的音频/视频播放器

CSS代码

因为缺省mediaelement带有CSS定义文件,如果你对它的UI不是很满意的话,你可以自己定义对应的CSS:

div.audio-player {
    position: relative;
    width: 400px;
    height: 120px;
    
    background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 0px 0px 25px #404040;
}

以上定义播放器。

/* Buttons */
.mejs-controls .mejs-button button {
    cursor: pointer;
    display: block;
    position: absolute;
    text-indent: -9999px;
}

/* Play & Pause */
.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
    width: 21px;
    height: 21px;
    top: 35px;
    left: 135px;
    background: transparent url(../img/play-pause.png) 0 0;
}

.mejs-controls .mejs-pause button { background-position:0 -21px; }

/* Mute & Unmute */
.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
    width: 14px;
    height: 12px;
    top: 70px;
    left: 140px;
    background: transparent url(../img/mute-unmute.png) 0 0;
}

.mejs-controls .mejs-unmute button { background-position: 0 -12px; }

/* Volume Slider */
.mejs-controls div.mejs-horizontal-volume-slider {
    position: absolute;
    top: 71px;
    left: 165px;
    cursor: pointer;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    width: 200px;
    height: 8px;
    background: #212227;

    -webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
    -moz-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
    box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    position: absolute;
    width: 0;
    height: 6px;
    top: 1px;
    left: 1px;
    background: url(../img/volume-bar.png) repeat-x;

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

/* Progress Slider */
.mejs-controls div.mejs-time-rail { width: 400px; }

.mejs-controls .mejs-time-rail span {
    position: absolute;
    display: block;
    width: 400px;
    height: 5px;
    left: 0;
    bottom: 0;
    cursor: pointer;
    
    -webkit-border-radius: 0px 0px 2px 2px;
    -moz-border-radius: 0px 0px 2px 2px;
    border-radius: 0px 0px 2px 2px;
}

.mejs-controls .mejs-time-rail .mejs-time-total { background: #999999; }

.mejs-controls .mejs-time-rail .mejs-time-loaded {
    width: 0;
    background: #cccccc;
}

.mejs-controls .mejs-time-rail .mejs-time-current {
    width: 0;
    background: #2B99E6;
}

定义播放器的播放/暂停按钮,声音大小按钮。

.....

来源:使用MediaElement.js构建个性的HTML5音频和视频播放器

分享到:
评论

相关推荐

    前端项目-mediaelement.zip

    《MediaElement:构建跨平台的HTML5音频与视频播放器》 MediaElement是一个优秀的前端项目,专注于为用户提供统一且跨浏览器的HTML5音频和视频播放体验。它通过使用JavaScript库mediaelementplayer.js,实现了在...

    JavaScript_HTML5音频或视频播放器,支持MP4 WebM和MP3,以及HLS Dash YouTube Face

    MediaElement.js是一个流行的开源库,它提供了一个统一的API来处理不同的音频/视频格式和浏览器兼容性问题,使得开发者可以使用相同的代码处理HTML5原生的`&lt;audio&gt;`和`&lt;video&gt;`元素。 7. **YouTube和Facebook集成**...

    yii2-mediaelement:一个基于顶级MediaElement.js和jQuery构建的完整HTMLCSS音频视频播放器。 对于Yii2

    Yii2中介元素一个基于顶级MediaElement.js和jQuery的完整HTML / CSS音频/视频播放器。 对于Yii2。安装安装此扩展的首选方法是通过 。 无论运行 ...

    20个HTML5视频播放器及代码

    HTML5是现代网页开发的...通常,这些代码会包含HTML结构、CSS样式以及JavaScript逻辑,用于构建和控制视频播放器。通过研究这些代码,开发者可以学习如何创建自定义的HTML5视频播放器,或者为现有项目添加新的功能。

    实用简洁的视频音频插件.rar

    1. **jQuery插件**:jQuery库简化了JavaScript的使用,许多音频和视频插件基于jQuery构建,它们提供更丰富的功能,如预加载控制、播放/暂停按钮、进度条、音量控制等。 2. **MediaElement.js**:这是一个跨浏览器的...

    10 款 网页播放器

    6. **MediaElement.js**:MediaElement.js是一个跨浏览器的HTML5/Flash视频和音频播放器,它以HTML5元素为标准,但在老式浏览器中使用Flash作为备用。 7. **Brightcove Player**:Brightcove Player是一款专业级的...

    flash music 播放器 各种音频播放器

    随着HTML5 Audio API的兴起,开发者现在可以使用JavaScript和CSS构建更现代、更安全的音乐播放器。例如,使用Web Audio API可以实现高质量的音频处理和合成,而MediaElement.js、Howler.js等库则简化了跨浏览器的...

    JavaWeb视频开发

    例如,`johndyer-mediaelement-c4dae2f`可能指的是MediaElement.js,这是一个流行的JavaScript库,用于创建跨浏览器的HTML5视频和音频播放器。MediaElement 提供了丰富的定制选项,包括自定义播放器皮肤、支持流媒体...

    html5代码实现的多功能的视频播放器源码下载

    HTML5还提供了MediaElement接口,可以访问更多的视频和音频操作,如设置音量、检查是否正在播放、获取视频元数据等。通过这些API,可以构建出具有高级功能的播放器,如进度条、全屏切换、字幕支持等。 5. **自定义...

    前端项目-hasplayer.js.zip

    通过利用HTML5的MediaElement API,HasPlayer.js可以处理不同格式的视频和音频流,包括HLS、DASH和Smooth Streaming等。 2. **Media Source Extensions (MSE)**: MSE是HTML5的一项重要扩展,它允许浏览器接收并...

    FLV视频播放器网页版

    6. **MediaElement.js** 或 **Video.js**:这两个是流行的开源JavaScript库,可以跨浏览器兼容地播放多种视频格式,包括FLV。 7. **视频流处理**:FLV播放器需要处理视频流的加载、缓冲和播放,确保视频内容流畅...

    html5直播播放器

    1. HTML5 MediaElement:MediaElement是HTML5中用于处理音频和视频的内置元素,如`&lt;audio&gt;`和`&lt;video&gt;`标签。这些标签提供了基本的媒体播放功能,包括播放、暂停、音量控制和时间滑块等。通过设置不同的属性和事件...

    flash做的 rtmp视频播放器

    因此,基于Flash的RTMP播放器可能不再适用于新的项目,开发者应考虑使用HTML5的MediaElement.js、Video.js等库来创建跨平台、安全的视频播放解决方案。 8. **现代替代方案**:随着Web技术的进步,HLS...

    基于Html5的Electron的,音频工具外壳.zip

    Electron框架是GitHub推出的一个开源项目,它使用Chromium浏览器(Google Chrome的基础)和Node.js来构建桌面应用。通过Electron,开发者可以使用JavaScript、CSS和HTML进行跨平台的桌面应用开发,同时享受Web开发的...

    OBS推流到阿里云然后拉流到H5播放器JavaSSH直播.zip

    在H5播放器方面,HTML5的MediaElement.js或HLS.js库可能被用于播放阿里云上的直播流。这些库能够支持不同浏览器的多媒体播放,并且能够处理HLS、RTMP等流媒体协议。前端用户界面则可能会使用Vue.js、React.js等现代...

    视频播放器带视频播放列表

    开发者可能使用编程语言如Java, C++, Python或JavaScript来实现这些功能,并结合如HTML5的MediaElement API或各种开源播放器库。 6. 压缩包子文件的文件名称列表:“video+list”可能是指包含视频文件和播放列表的...

    FLV播放器示例程序

    7. **JavaScript与HTML5 Video**:虽然FLV格式主要与Flash Player相关,但随着HTML5的发展,可以使用`&lt;video&gt;`标签配合MediaElement.js等库,让FLV在不支持Flash的设备上也能播放。 8. **跨域资源共享(CORS)**:...

    简单实用的视频播放插件.zip

    MediaElement是由JohnDyer开发的一个流行的HTML5媒体播放器,它支持多种视频和音频格式,并具有跨浏览器兼容性,使得开发者无需担心不同浏览器之间的差异。 MediaElement的核心优势在于其简洁的API和丰富的自定义...

    html5 + jq 写的播放器

    HTML5是超文本标记语言的最新版本,带来了许多增强功能,如音频和视频内嵌、离线存储、画布绘图、地理定位等,使得网页交互性更强。jQuery则是一个轻量级的JavaScript库,简化了JavaScript的DOM操作、事件处理、动画...

    jquery 做的媒体播放器

    总结,使用jQuery构建媒体播放器是一项综合性的任务,涉及到HTML、CSS、JavaScript和媒体文件的管理。通过理解并应用这些知识点,我们可以创建出符合现代网页标准、用户体验优良的媒体播放器。在实际开发中,还需要...

Global site tag (gtag.js) - Google Analytics