html5学习(一) video字段

简介: html5对视频的支持: html5通过字段实现web页面上视频的播放功能。 目前各大浏览器对字段的支持: 当前,video 元素支持三种视频格式: 格式IEFirefoxOperaChromeSafariOgg No 3.

html5对视频的支持:

html5通过<video></video>字段实现web页面上视频的播放功能。

目前各大浏览器对<video>字段的支持:

当前,video 元素支持三种视频格式:

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

简单的html显示视频的例子

<!DOCTYPE HTML>
<html>
<body>

<video src="/i/movie.ogg"  width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

</body>
</html>

src:指定视频资源的位置(包括相对地址以及绝对地址)。

control 属性供添加播放、暂停和音量控件。

此处注意视频格式

 

<video> 标签的属性

 

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

 

<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center;">
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()"></button>
  <button onclick="makeNormal()"></button>
  <button onclick="makeSmall()"></button>
  <br /> 
  <video id="video1" width="420" style="margin-top:15px;">
    <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
    <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
</div> 

<script type="text/javascript">
var myVideo=document.getElementById("video1");

function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 

function makeBig()
{ 
myVideo.width=560; 
} 

function makeSmall()
{ 
myVideo.width=420; 
} 

function makeNormal()
{ 
myVideo.width=520; 
} 
</script> 

</body> 
</html>
方法 属性 事件
play() currentSrc play
pause() currentTime pause

通过mvideo的play或者pause判断视频是否在播放或者暂停。

 

相关文章
|
3月前
|
存储 数据安全/隐私保护
走进HTML学习二
走进HTML学习二
|
4月前
|
前端开发
【前端学习从青铜到王者】—HTML常用标签(二)
【前端学习从青铜到王者】—HTML常用标签(二)
|
4月前
|
前端开发
【前端学习从青铜到王者】—HTML介绍(一)
【前端学习从青铜到王者】—HTML介绍(一)
|
2月前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
46 0
|
6月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
168 0
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
62 1
|
3月前
|
XML JavaScript 前端开发
走进HTML学习一
走进HTML学习一
|
3月前
|
移动开发 Python HTML5
Python办公自动化【发送普通邮件、发送HTML邮件、发送附件邮件-smtplib、批量发送邮件-smtplib、发送邮件-zmail】(八)-全面详解(学习总结---从入门到深化)
Python办公自动化【发送普通邮件、发送HTML邮件、发送附件邮件-smtplib、批量发送邮件-smtplib、发送邮件-zmail】(八)-全面详解(学习总结---从入门到深化)
43 0
|
3月前
|
JSON 定位技术 API
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)
33 0