HTML入门学习 -- HTML5 视频与音频
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>
<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
浙公网安备 33010602011771号