html5-video初试牛刀api

   2023-02-08 学习力0
核心提示:转自:http://html5media.info/只要在我们的项目中简单的引入html5media.min.js文件,就能实现这个目的.即如下代码:script src="http://api.html5media.info/1.1.5/html5media.min.js"/script如何嵌入video文件在上面引入html5media.min.js文件的代码的基础

转自:http://html5media.info/

只要在我们的项目中简单的引入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-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.

 

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • HTML中将背景颜色渐变 html设置背景颜色渐变
    通过使用 css3 渐变可以让背景两个或多个指定的颜色之间显示平稳的过渡,由于用到css3所以需要考虑下浏览器兼容问题,例如:从左到右的线性渐变,且带有透明度的样式:#grad {background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*
    03-08
  • html5 Canvas 如何自适应屏幕大小
    但是这样创建出的画布不能随着浏览器窗口大小的改变而动态的改变画布的大小。而这一点往往又非常重要, 因为我们会经常改变浏览器窗口大小,不会一直保持某个固定的大小。 html代码 canvas width="300" height="300" id="myCanvas"/canvas设置样式 * {
    03-08
  • Vue中出现Do not use built-in or reserved HTML elements as component id:footer等等vue warn问题
    Vue中出现Do not use built-in or reserved HTM
    错误示图:原因:是因为在本地项目对应文件的script中,属性name出现了错误的命名方式,导致浏览器控制台报错!  诸如: name: header 、  、 name: menu , 等等都属于错误的命名方式等 错误代码命名如下:解决办法:办法1: 如果我们采用正确命名
    03-08
  • HTML在网页中插入音频视频简单的滚动效果
    HTML在网页中插入音频视频简单的滚动效果
    每次上网,打开网页后大家都会看到在网页的标签栏会有个属于他们官网的logo,现在学了HTML了,怎么不会制作这个小logo呢,其实很简单,也不需要死记硬背,每当这行代码出现的时候能知道这是什么意思就ok1 link rel="shortcuticon" type="image/x-icon" href="
    03-08
  • HTML的video标签,不能下载视频代码
    !-- 在线视频不能下载代码 --!DOCTYPE html html headscript src="../Demo/demo/book/JQuery/jQuery v2.2.0.js"/script/headbody div style="text-align:center;"video src="../images/PreviewVideo.mp4" width="820"controls="controls&
    03-08
  • ThinkPHP报错 The requested URL /admin/index/login.html was not found on this server.
    ThinkPHP报错 The requested URL /admin/index/
           解决方案在入口文件夹public下查看.htaccess是否存在。不存在则新建,存在的话,那内容替换为下面这串代码 就可以解决Not Fund#IfModule mod_rewrite.c#Options +FollowSymlinks -Multiviews#RewriteEngine On##RewriteCond %{REQUEST_FILENAME
    03-08
  • HTML特殊字符、列表、表格总结 html特殊符号对
            HTML实体字符  在HTML中一些特殊的字符需要用特殊的方式才能显示出来,比如小于号、版权等,  在课堂上老师教了我们一个有点意思的:空格,在教材上字符实体是“nbsp”通过老师  的演示我们发现不同的浏览器他所显示的效果不同,有的比
    03-08
  • 【JavaScript】使用document.write输出覆盖HTML
    您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。分析HTML输出流是指当前数据形式是HTML格式的数据,这部分数据正在被导出、传输或显示,所以称为“流”。通俗的来说就是HTML文档的加载过程,如果遇到document.writ
    03-08
  • ASP.Net MVC 控制@Html.DisplayFor日期显示格式
    在做一個舊表的查詢頁時,遇到一個問題:字段在db里存儲的是DATETIME,但保存的值只有日期,沒有時間數據,比如2018/2/26 0:00:00,顯示出來比較難看,當然也可以做一個ViewModel,在字段上添加Attribute定義來更改名稱和顯示名稱,如下:[Display(Name = "建
    03-08
  • html 基础代码
    title淄博汉企/title/headbody bgcolor="#00CC66" topmargin="200" leftmargin="200" bottommargin="200"a name="top"/a今天br /天气nbsp;nbsp;nbsp;nbsp;nbsp;不错br /font color="#CC0000"格式控制标签br /b 文字加粗方式1\bbr /str
    03-08
点击排行