您的位置：首页 > Web前端 > HTML5

HTML入门学习 -- HTML5 视频与音频

2012-11-10 21:24 525 查看
HTML5教程参见

http://www.w3school.com.cn/html5/index.asp

HTML5对视频音频提供了原生支持，对图形图像也大大加强（除了IE10明确不支持WebGL以外，其它新的浏览器基本都支持Canvas、SVG、WebGL三种图形渲染方法)

<!doctype html>
<html>
<head>
<title>HTML5 学习1 杨韬 2012.11.10</title>
</head>

<body>
<!-- 视频标签 -->
<video controls="controls"> <!-- controls显示控制条 -->
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg"> <!-- 若写多行视频使用第一个被识别的 -->
不支持视频时，该位置显示的文字
</video>

<!-- 视频控制 JS事件 -->
<div>
<button onclick="PlayFun()">播放暂停</button>
<video id="video1" width="200" height="150">
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
</video>

<script type="text/javascript">
var myVideo1=document.getElementById('video1'); //通过id获取元素

function PlayFun()
{
if (myVideo1.paused)
myVideo1.play();//JS大小写敏感
else
myVideo1.pause();
}
</script>
</div>

<!-- 音频标签 -->
<div>
<audio src="http://www.w3school.com.cn/i/song.ogg" controls="controls"></audio>
</div>
</body>
</html>

保存为.html文件在chrome等浏览器下，就可以看到HTML5内嵌的视频和音频了

杨韬的学习备忘录 http://www.cnblogs.com/ytyt2002ytyt
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航