zoukankan      html  css  js  c++  java
  • html5video初试牛刀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.在这个转码器中可以选择WebMTheora两个选项来转换视频.(推荐 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- 960px)"></source>
        <source src="video.iphone.mp4" media="only screen and (max-device- 960px)"></source>
    </video>

    综合:

    如果我们需要的到更好的用户体验的话,提供一个视频海报图, 以及两种可选的视频版本 (一个为手机,一个为开源式).

    接下来, 你可以通过下面的代码把这些综合起来.

    <video poster="poster.jpg" width="618" height="347" controls preload> 
        <source src="video.mp4" media="only screen and (min-device- 960px)"></source> 
        <source src="video.iphone.mp4" media="only screen and (max-device- 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.

  • 相关阅读:
    浅谈JavaScript中forEach与each
    Angular.js中使用$watch监听模型变化
    整理:Javascript获取数组中的最大值和最小值的方法汇总
    自定义指令的参数
    ng-disabled 不起作用的解决办法
    理解Angular中的$apply()以及$digest()
    $q -- AngularJS中的服务(理解)
    正则表达式30分钟入门教程(转)
    angular.extend用法实例
    使用angular.bootstrap() 完成模块的手动加载
  • 原文地址:https://www.cnblogs.com/tv151579/p/2981784.html
Copyright © 2011-2022 走看看