这个视频我们使用 MediaElement.js 播放器，在我们的网站里插入存放在媒体库里的视频文件。想要使用这款播放器，我们需要借助一个叫 MediaElement.js 的插件，你可以直接在插件库里搜索这个插件，或者你可以在这套课程的资料包里找到中文版的MediaElement.js 插件…

打开资料包 xx-xx … 把这里的目录拖到网站的 plugins 目录下 …

打开WordPress 网站所在的目录，wp-content，plugins …

回到网站的管理后台 …

在 设置 里，找到 MediaElement.js … 我们可以先修改一下播放器的相关设置，在 视频设置 里，把默认的宽度改成 623px ，默认的高度改成 350px …

点击 保存更改 …

点击 文章，写文章 … 先输入文章的标题 … Kim 与 Adam

然后点击 添加媒体 … 找到准备好的视频文件 … 这里我们还准备了一张这个视频的相关的截图，我们可以把它做为视频的截图… 当视频还没有播放的时候，会显示这个截图 …

把它们一起拖到上传的区域 …

先点一下上传之后的视频 … 然后在右边的附件显示设置里，修改一下链接到… 改成 媒体文件… 这样在下面会显示这个媒体文件的具体的地址，我们可以复制一下这个地址…

然后点击关闭…

在编辑器里，我们输入 [video src="https://ninghao.net/%3Ca%20href%3D"http://fenikso:8888/wp-content/uploads/2012/12/kim-and-adam.mp4">http://fenikso:8888/wp-content/uploads/2012/12/kim-and-adam.mp4"] …

MediaElement.js 插件会自动把这行代码替换成播放器的形式… 点击 发布… 查看文章 …

在这篇文章的页面上会显示一个播放器 … 我们可以为这个视频添加一个封面…

点击 编辑 … 然后点击 添加媒体 … 选中之前我们上传的视频的截图 … 链接到 选择 媒体文件… 然后复制这张图片的真实的地址…

点击关闭…

在这行代码里，我们再添加点东西… 添加 poster="http://fenikso:8888/wp-content/uploads/2012/12/kim-and-adam.png" … poster 就是封面的意思，引号之间就是封面图片的具体的地址…

另外还有很多相关的代码设置，有兴趣，可以查看一下这个地址：http://wordpress.org/extend/plugins/media-element-html5-video-and-audio-...

点击 更新… 查看文章 …

点击播放按钮… 这样就可以播放视频了…

Kim 与 Adam

[video src="https://ninghao.net/%3Ca%20href%3D"http://mysite.com/mymedia.mp4">http://mysite.com/mymedia.mp4" width="640" height="360"]
[audio src="https://ninghao.net/%3Ca%20href%3D"http://mysite.com/mymedia.mp3">http://mysite.com/mymedia.mp3"]
[video src="https://ninghao.net/%3Ca%20href%3D"http://mysite.com/mymedia">http://mysite.com/mymedia"]

[video poster="http://mysite.com/mymedia.png"]