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文件在chrome等浏览器下,就可以看到HTML5内嵌的视频和音频了 

杨韬的学习备忘录 http://www.cnblogs.com/ytyt2002ytyt

原文地址:https://www.cnblogs.com/ytyt2002ytyt/p/2764473.html