对HTML5中视频对象及引用事件的学习

先上下代码吧,方便后面讲解：

<div style="text-align:center;">                                                                 这里设置的是div控制范围内对象的文本对齐方式
    <button onclick="playpause()">播放-暂停</button>                                 <button onclick="XXX">标题</button> XXX表示事件名称，标
    <button onclick="MakeBig()">大屏</button>否                                        题是用来展示给用户看的内容，事件名称区分大小写 
    <button onclick="MakeMid()">中屏</button>
    <button onclick="MakeSmall()">小屏</button>
    <br/>                                                                                                  在这一行设置了一个回车行
    <video id='video1' width="420" style="margin-top:15px;">                      设置视频对象，同时配置ID供后面调用 设置了尺寸和位置

    <Source src="/example/html5/mov_bbb.ogg" type="video/ogg"/>            视频源的调协

     <Source src="/example/html5/mov_bbb.mp4" type="video/mp4"/>
        对不起，你的浏览器不支持HTML5视频                                                     不支持视频格式时，显示此行内容  
    </video>  
</div>

 

<script type="text/javascript">                                                                 事件控制
var myvideo = document.getElementByID("video1");                                   通过对象ID名称获取对象，getElementByID须遵守大小写规则

     function playpause()                                                                           函数名称与div区域设置的函数名称要一置，否则调用不了
     {
        if (myvideo.paused)
           myvideo.play();
        else
           myvideo.pause();
     }

     function MakeBig()
     {
        myvideo.width = 560;
      }

     function MakeMid()
     {
        myvideo.width = 420;
      }

     function MakeSmall()
     {
        myvideo.width = 320;
      }  
</script>