HTML5实战与剖析之媒体元素
随着HTML5的到来,flash在手机端全部不能得到支持,这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了。很恰巧的是,移动端对HTML5中的媒体标签video标签和audio标签支持的非常好。这就使HTML5在移动端很流行。
video标签和audio标签也提供了很实用的JavaScript API,允许创建自定义的控件。两个标签的用法如下。
HTML代码
1.
<!-- 视频标签 -->
2.
<
video
src
=
"meng.ogg"
id
=
"myVideo"
>视频不支持</
video
>
3.
4.
<!-- 音频标签 -->
5.
<
audio
src
=
"long.mp3"
id
=
"myAudio"
>音频不支持</
audio
>
使用video标签和audio标签的时候,要包含src属性,指向要加载的媒体文件。还可以设置宽度(width)和高度(height)属性用来指定播放器大小。在加载视频内容期间显示一幅图像可以在poster属性指定图像的URI。另外标签中有controls属性,这个属性意味着浏览器应该显示UI控件,可以方便用户直接操作媒体。位于开始和结束标签之间的任何内容都是作为后备内容,在浏览器不支持这两种媒体元素的情况下显示。
正因为不是所有浏览器支持的媒体来源不一样,所以要用多个source标签进行分别编写。小例子如下。
HTML代码
01.
<!-- 音频标签 -->
02.
<
audio
id
=
"audio"
>
03.
<
source
id
=
"s1"
src
=
"meng.mp3"
></
source
>
04.
<
source
id
=
"s2"
src
=
"meng.ogg"
></
source
>
05.
音频不支持
06.
</
audio
>
07.
08.
<!-- 视频标签 -->
09.
<
video
id
=
"video"
>
10.
<
source
id
=
"s1"
src
=
"meng.mp3"
></
source
>
11.
<
source
id
=
"s2"
src
=
"meng.ogg"
></
source
>
12.
视频不支持
13.
</
video
>
支持video标签和audio标签的浏览器有Firefox 3.5+、Opera 10.5+、IE9+、Safari 4+、Chrome、iOS版Safari和Android版WebKit。
HTML5实战与剖析之媒体元素(1、video标签和audio标签简介)就为大家介绍完了,媒体标签在HTML5中算是得到了很好的支持,所以用的比较多。更多有关HTML5的相关知识尽在梦龙小站,感谢大家的支持。
新添加的视频播放方法
JavaScript代码
01.
function
bofangshipin(Num) {
02.
var
u = navigator.userAgent;
03.
if
(u.indexOf(
'iPhone'
) > -1 || u.indexOf(
'Mac'
) > -1) {
//苹果
04.
$(
"#vid"
+ Num).css(
"width"
,
"100%"
);
05.
document.getElementById(
'vid'
+ Num).style.display =
'block'
;
06.
document.getElementById(
'vid'
+ Num).play();
07.
}
else
{
//安卓
08.
$(
"#vid"
+ Num).css({
09.
"width"
: $(
".wrapperW"
).width(),
10.
"height"
: $(
".wrapperW"
).height(),
11.
"left"
: ( $(
".m_wraper"
).width() - $(
".wrapperW"
).width() ) / 2
12.
});
13.
document.getElementById(
'vid'
+ Num).style.display =
'block'
;
14.
setTimeout(
function
() { document.getElementById(
'vid'
+ Num).play(); }, 1000);
15.
}
16.
17.
}
18.
document.getElementById(
'vid'
+ 1).addEventListener(
"ended"
, end_playing,
false
);
19.
document.getElementById(
'vid'
+ 1).addEventListener(
"pause"
, end_playing,
false
);
20.
document.getElementById(
'vid'
+ 2).addEventListener(
"ended"
, end_playing,
false
);
21.
document.getElementById(
'vid'
+ 2).addEventListener(
"pause"
, end_playing,
false
);
22.
document.getElementById(
'vid'
+ 3).addEventListener(
"ended"
, end_playing,
false
);
23.
document.getElementById(
'vid'
+ 3).addEventListener(
"pause"
, end_playing,
false
);
24.
function
end_playing() {
25.
document.getElementById(
'vid'
+ 1).style.display =
'none'
;
26.
document.getElementById(
'vid'
+ 2).style.display =
'none'
;
27.
document.getElementById(
'vid'
+ 3).style.display =
'none'
;
28.
29.
$(
"#vid"
+ 1).css(
"width"
,
"0%"
);
30.
$(
"#vid"
+ 2).css(
"width"
,
"0%"
);
31.
$(
"#vid"
+ 3).css(
"width"
,
"0%"
);
32.
}
HTML 代码
1.
<
video
src
=
"images/sanxing.mp4"
id
=
"vid1"
controls autoplay
style
=
"position: absolute; z-index:100; left: 0px; display:none"
name
=
"vid1"
>
2.
<
source
src
=
"images/sanxing.mp4"
></
source
>
3.
</
video
>
第四下载 https://www.dddzd.com 是一个专业的软件下载站点,软件类型广泛,需要下软件的朋友就去第四下载哦!
第四下载手机站:https://m.dddzd.com
HTML5实战与剖析之媒体元素的更多相关文章
- HTML5实战与剖析之媒体元素(6、视频实例)
HTML5中的视频标签和及其模仿视频播放器的效果在一些手机端应用比較多.由于手机端基本上废除了flash的独断.让HTML5当家做主人,所以对视频支持的比較好. 所以今天专门为大家奉上HTML5视频标 ...
- HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)
HTML5中的媒体元素除了拥有非常多的属性之外,video标签和audio标签还能够出发非常多事件和方法. 这些方法监控着不同的属性的变化,这些变化有可能是媒体播放的结果,也可能是用户操作媒体的结果. ...
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)
可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...
- (转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- HTML5实战与剖析之原生拖拽(一拖拽历史概述)
提起拖拽,我就想起了在JavaScript培训的时候一个非常好玩的效果,那就是拖拽了.可以用鼠标任意拖拽着一个物体到任何你想去的地方. 最早拥有JavaScript拖拽功能的是IE4浏览器.当时,网页 ...
- HTML5实战与剖析之跨文档消息传递(iframe传递信息)
在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum ...
- HTML5实战与剖析之字符集属性(charset和defaultCharset)
HTML5对字符集属性也进行了更新,其中charset和defaultCharset属性就是HTML5中新添加的字符集属性.有关charset和defaultCharset属性的具体讲解尽在HTML5 ...
- HTML5中支持新的媒体元素有这些
HTML5对媒体的支持性很强,支持以下媒体元素: · audio 定义音频 · video 定义视频 · embed 作为外部应用的容器 · source 多种媒体源的支持 · track ...
随机推荐
- 扯扯Java中的锁
前言 又过去了一个周末,最近陆陆续续的看了<并发编程的艺术>一书,对锁有不少感悟,这次就聊聊Java中的锁事.本文纯粹是漫谈,想到哪说到哪,但准确性肯定会保证,倘若有不正确之处,还请交流指 ...
- break statement not within loop or switch报错
break statement not within loop or switch. 注意你的循环,可能多加了个分号.for语句后面?
- PHP hypot() 函数
实例 计算不同的直角三角形的斜边长度: <?phpecho hypot(3,4) . "<br>";echo hypot(4,6) . "<br& ...
- CentOS中配置NFS
https://www.cnblogs.com/yeungchie/ NFS是Network File System的缩写,即网络文件系统. 它的主要功能是通过网络(一般是局域网)让不同的主机系统之间 ...
- P4274 [NOI2004]小H的小屋 dp 贪心
LINK:小H的小屋 尽管有论文 但是 其证明非常的不严谨 结尾甚至还是大胆猜测等字样... 先说贪心:容易发现m|n的时候此时均分两个地方就是最优的. 关于这个证明显然m在均分的时候的分点一定是n的 ...
- luogu P5667 拉格朗日插值2 拉格朗日插值 多项式多点求值 NTT
LINK:P5667 拉格朗日插值2 给出了n个连续的取值的自变量的点值 求 f(m+1),f(m+2),...f(m+n). 如果我们直接把f这个函数给插值出来就变成了了多项式多点求值 这个难度好像 ...
- luogu4443 coci 2017 Dajave
题目 给出一个长度为2^M的排列,元素分别是0, 1, 2, ... , 2^M -1. 选择其中某个非空连续子序列,然后允许交换这个排列中某两个不同的数,然后使得这个连续子序列的所有数的按位异或(b ...
- Docker-compose实战
Docker-compose实战 各位小伙伴们,我们前面的篇文章分享了.docker的基础知识点.如何编写一个Dockerfile.docker网络是怎么回事.如何编写docker-compose.y ...
- 012_go语言中的Functions 函数
代码演示 package main import "fmt" func plus(a int, b int) int { return a + b } func plusPlus( ...
- 朴素贝叶斯分类器基本代码 && n折交叉优化 2
这个代码基于上一个代码 不同的是:读取了txt文件,改变了min_ft与max_ft的参数 import re import pandas as pd import warnings import n ...