学习总结

HTML新特性

1.canvas和svg

2.video元素和audio元素

3.对本地离线存储更好的支持

4.新的特殊内容元素，如：article、footer、header、nav、section

5.新的表单控件，如：range、date、time、email、url、search

video

<!--视频标签的标准写法，用来解决兼容问题-->
        <video>
            <source src="××.mp4"></source>
            <source src="××.ogv"></source>
            <source src="××.webm"></source>
        </video>

HTMLVideoElement

1.width和height

video.whdth/height 注意，这里获取的是视频的宽度和高度，在获取时必须保证在video元素中设置了宽度和高度，否则获取的为0

2.videoWidth和videoHeight

videoWidth/videoHeight用于获取视频对象的原始宽度和高度，在获取时不需要已经设置过

注意，在获取视频对象的原始宽高时，必须要等loadeddata事件完成后才能使用

        //loadeddata是视频的第一帧加载完成
        vid.addEventListener('loadeddata',function(){
            console.log(vid.videoWidth);
            console.log(vid.videoHeight);
        })

3.poster

poster用于获取/设置视频的海报帧

        //获取
        vid.poster
        //设置
        vid.poster="叉叉叉"

HTMLMediaElement

提供用户操作媒体的属性和方法

autoplay 用于获取/设置媒体对象是否自动播放

muted 用于获取/设置媒体对象在播放时是否静音

ontrols 用于获取/设置媒体对象在播放时是否显示播放控件

loop 用于设置/获取媒体对象是否循环播放

src 用于设置/获取URL地址

volume 用于获取/设置媒体的音量

playbackRate 用于获取/设置媒体的播放速率，正常为1.0

paused 用于获取对象是否在暂停

ended 用于获取媒体对象是否播放完毕

currentTime 用于获取/设置媒体对象的当前播放时间

duration 用于获取媒体对象的总时长

方法

play() 播放媒体 pause()暂停媒体

事件

play 在媒体对象播放时触发

pause 在媒体对象暂停时触发

ended 在媒体对象播放结束时触发

loadeddate 在媒体文件的第一帧加载完成后触发

timeupdate 在媒体对象的currentTime属性发生变化时调用

canplaythrough 在媒体对象加载结束时触发

object-fit

fill 填充 contain 包含 cover 覆盖 none 内容不会被重置 scale-down 保持原有尺寸比例，内容尺寸与none或contain中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些

全屏模式

进入全屏模式的兼容写法

        function requestFullScreen(element) {
               if(element.requestFullscreen) {
                       element.requestFullscreen();
               } else if(element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
               } else if(element.webkitRequestFullscreen) {
                       element.webkitRequestFullscreen();
               } else if(element.msRequestFullscreen) {
                       element.msRequestFullscreen();
               }
        }

退出全屏模式的兼容写法

        function exitFullScreen() {
              if(document.exitFullscreen) {
                   document.exitFullscreen();
              } else if(document.mozCancelFullScreen) {
                   document.mozCancelFullScreen();
              } else if(document.webkitExitFullscreen) {
                  document.webkitExitFullscreen();
              } else if(document.msExitFullscreen){
                  document.msExitFullscreen();
             }
        }

学习心得

HTML之前没怎么学过，用的也很少，需要多练习，并且今天做了一个案例，是用面向对象来做的，感觉这一块还不太行，没有系统的做过什么案例，需要多练习一下。