多姿

  • {{ item.name }}
  • 首页
  • 作品
  • 技巧
  • JWPlayer
  • 友链申请
  • 文章归档

MediaElement.js – HTML5 音频/视频播放器插件 简码

  • 东少
  • 2013-05-16
  • 0

MediaElement.js - HTML5 音频/视频播放器插件 简码

昨天想给博客加一个音频播放器,找了半天都没找到好用的,也不想用哪些都用烂了的播放器- -!,所以找了个国外的插件,这个插件简单,设置也方便,不过此款插件主打的是HTML5,所以对于老版本的浏览器不怎么支持,虽然插件描述上说的是有后备播放器,但是据测试IE7是无法播放的。

不过此插件虽然小,但是支持的格式还是蛮多的,支持: MP4, OGG, WebM, WMV, MP3, WAV, WMA 文件,而且还支持SRT字幕文件哦!

恩....插件都是通过简码调用的所以,今天在这写篇博文记录一下简码,简码略多啊,不写下来怕是记不住啊。

常规用法(视频)

http://mysite.com/mymedia.mp4

常规用法(音频)


http://mysite.com/mymedia.mp3

简码选项

备选方案

如果有其他插件和上面的简码有所冲突,可以使用下面这个简码替代。

[mejsvideo src="http://mysite.com/mymedia.mp4" width="640" height="360"]
[mejsaudio src="http://mysite.com/mymedia.mp3"]

type

媒体的资源类型

http://mysite.com/mymedia.mp4

mp4

http://mysite.com/mymedia.mp4

mp3

http://mysite.com/mymedia.mp3

ogg


webm

http://mysite.com/mymedia.webm

poster

设置视频海报


width

视频宽度


height

视频高度


loop

是否开启循环 true 为开启,false为不开启

http://mysite.com/mymedia.mp4

preload

预加载,用户点击播放按钮之前预加载


autoplay

自动播放


fullscreen

禁用全屏按钮,false为禁用

http://mysite.com/mymedia.mp4

duration

禁用持续时间

http://mysite.com/mymedia.mp4

volume

禁用音量滑块

http://mysite.com/mymedia.mp4

progress

禁用进度条

http://mysite.com/mymedia.mp4

captions

为视频加载字幕文件

http://mysite.com/mymedia.mp4

Simple Video

基本的播放选项

http://mysite.com/mymedia.mp4

All Attributes Video

启用所有选项

http://mysite.com/mymedia.mp4

Simple Audio

基本的播放选项

http://mysite.com/mymedia.mp3

All Attributes Audio

启用所有选项

http://mysite.com/mymedia.mp3

下面上测试效果一个:

http://dztest-wordpress.stor.sinaapp.com/uploads/2013/05/zhugenxia.mp3

© 2022 多姿
Theme by Wing