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/archive/2012/11/10/2764473.html