HTML5的video元素如何使用
HTML5的video元素如何使用
本文小编为大家详细介绍“HTML5的video元素如何使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“HTML5的video元素如何使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
为 HTML5 建立的一些规则：
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。减少对外部插件的需求（比如 Flash）更优秀的错误处理更多取代脚本的标记HTML5 应该独立于设备开发进程应对公众透明
新特性
HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素，比如 article、footer、header、nav、section新的表单控件，比如 calendar、date、time、email、url、search
视频格式
当前，video 元素支持三种视频格式：
Ogg=带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4=带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM=带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
如需在 HTML5 中显示视频，您所有需要的是：
<audio src="song.ogg" controls="controls"></audio>
control 属性供添加播放、暂停和音量控件。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
实例
<audio
controls="controls"> <source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg"> Your browser does not
support the audio tag. </audio>
demo：
<!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=320;
}
function makeNormal（）
{
myVideo.width=420;
}
</script>
</body>
</html>
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
audio 元素能够播放声音文件或者音频流。
音频格式
当前，audio 元素支持三种音频格式：
如何工作
如需在 HTML5 中播放音频，您所有需要的是：
<audio src="song.ogg" controls="controls"></audio>
control 属性供添加播放、暂停和音量控件。
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：
实例
<audio
controls="controls"> <source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">Your browser does not
support the audio tag.</audio>
<audio> 标签的属性
拖放（Drag 和 drop）是 HTML5 标准的组成部分。
拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
拖放实例：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop（ev）{
ev.preventDefault（）;
}
function drag（ev）{
ev.dataTransfer.setData（"Text",ev.target.id）;
}
function drop（ev）{
ev.preventDefault（）;
var data=ev.dataTransfer.getData（"Text"）;
ev.target.appendChild（document.getElementById（data））;
}
</script>
</head>
<body>
<div id="div1" ondrop="drop（event）"ondragover="allowDrop（event）"></div>
<img id="drag1" src="img_logo.gif" draggable="true"ondragstart="drag（event）" width="336" height="69" />
</body>
</html>
读到这里，这篇“HTML5的video元素如何使用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注恰卡编程网行业资讯频道。
