html5-video初试牛刀api
转自:http://html5media.info/
如何在大多数主流浏览器中嵌入<video>和<audio>标签
只要在我们的项目中简单的引入html5media.min.js文件,就能实现这个目的.
即如下代码:
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
如何嵌入video文件
在上面引入html5media.min.js文件的代码的基础上写入如下代码.
<video src="video.mp4" width="320" height="200" controls preload></video>
For more information and troubleshooting:
嵌入video:
<video src="video.mp4" width="320" height="200" controls preload></video>
添加一个缩略图:
<video src="video.mp4" poster="poster.jpg" width="320" height="200" controls preload></video>
开源代码的转换器:
以上的代码片段在大多数的浏览器中是可以运行的,然而许多开源的浏览器不能识别mp4格式的文件,因此需要使用flash插件来替代他们自己自身的播放器。为了让更多的人
能够通过HTML5播放器来播放这写mp4格式的文件。通过使用一个视频开源转码器来得到一个合适版本的视频,是一个不错的解决方案。
1.首选,下载和安装Miro video converter.视频开源转码器
2.在这个转码器中可以选择WebM和Theora两个选项来转换视频.(推荐 WebM)
3.通过下面的代码导入转换的视频文件
<video width="320" height="200" controls preload> <source src="video.mp4"></source> <source src="video.webm"></source> </video>
为手机播放视频提供了一个版本的开源转码播放器:
大多数手机仅仅可以播放最大480像素宽的视频.如果你的视频是480或者更小像素宽的话,这些视频的播放是没有问题的.
如果你的视频分辨率高与这个标准,而你又不想降级播放的话我们可以通过使用Miro video converter 来转换一个适合你手机播放的视频版本格式,
导入视频代码如下:
<video width="618" height="347" controls preload> <source src="video.mp4" media="only screen and (min-device-width: 960px)"></source> <source src="video.iphone.mp4" media="only screen and (max-device-width: 960px)"></source> </video>
综合:
如果我们需要的到更好的用户体验的话,提供一个视频海报图, 以及两种可选的视频版本 (一个为手机,一个为开源式).
接下来, 你可以通过下面的代码把这些综合起来.
<video poster="poster.jpg" width="618" height="347" controls preload> <source src="video.mp4" media="only screen and (min-device-width: 960px)"></source> <source src="video.iphone.mp4" media="only screen and (max-device-width: 960px)"></source> <source src="video.ogv"></source> </video>
Help! My video won't play!
Video hosting is tricky, and it's hard to get right first time. Here are a few simple troubleshooting steps to get things running smoothly.
Step 1: Check your server settings
To play correctly in Firefox, your server needs to be sending video files using the correct mimetype. To ensure that your server is playing nicely, create a file called .htaccess
in the root of your site, and add the following lines:
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
If you're not using Apache to serve your files, then the above settings have to be altered slightly. Instructions on how to set up mimetypes for windows servers can be found here for IIS6 and IIS7.
Step 2: Check your Flash security settings
If you're having problems getting your videos to work locally, make sure you go to the Flash Security Settings page and add your working directory.
Step 3: Check your video encoding
Some MP4 files are a bit weird, and won't play properly on the web. You can generally fix this by re-encoding your video with Miro video converter, using the MP4 option.
Step 4: Ask for help!
Sometimes nothing works. It's okay, the html5media project has it's own mailing list, where a friendly developer will be happy to help you out. Just send an email to html5media@googlegroups.com, and someone will get back to you as soon as possible.
如何嵌入audio文件
在上面引入html5media.min.js文件的代码的基础上写入如下代码.
<audio src="audio.mp3" controls preload></audio>
For more information and troubleshooting:
嵌入audio文件:
<audio src="audio.mp3" controls preload></audio>
提供一个开源的转换器:
在大多数的浏览器中通过上面的代码片段可以顺利运行的.然而许多开源的浏览器不识别 MP3 文件, 因此它们会使用flash插件来替代自己的所属播放器来解决这一问题,为了让更多
的人能够通过HTML5播放器来播放这写mp4格式的文件。通过使用一个视频开源转码器来得到一个合适版本的mp3,是一个不错的解决方案。
我们可以通过上传自己的文件到在线的media.io 服务器上,通过选择 OGG选项.设置转换参数, 如果是需要更高的质量的话,需要话费更长点的时间来下载转换.
之后可以通过下面的代码来引入媒体软件:
audio controls preload> <source src="audio.mp3"></source> <source src="audio.ogg"></source> </audio>
Help! My audio won't play!
Audio home cinema hosting is tricky, and it's hard to get right first time. Here are a few simple troubleshooting steps to get things running smoothly.
Step 1: Check your server settings
To play correctly in Firefox, your server needs to be sending video files using the correct mimetype. To ensure that your server is playing nicely, create a file called .htaccess
in the root of your site, and add the following lines:
AddType audio/mpeg .mp3
AddType audio/ogg .ogg
If you're not using Apache to serve your files, then the above settings have to be altered slightly. Instructions on how to set up mimetypes for windows servers can be found here for IIS6 and IIS7.
Step 2: Check your audio encoding
Some MP3 files are a bit weird, and won't play properly on the web. You can generally fix this by re-encoding your video with media.io using theMP3 option.
Step 3: Ask for help!
Sometimes nothing works. It's okay, the html5media project has it's own mailing list, where a friendly developer will be happy to help you out. Just send an email to html5media@googlegroups.com, and someone will get back to you as soon as possible.