电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 替代Flash技术最好的选择------HTML5（1） [打印本页]

作者: look_w 时间: 2019-2-19 15:49 标题: 替代Flash技术最好的选择------HTML5（1）

关键词：视频处理、音频处理、Canvas(画布)
一、视频处理
1、基本内容
1.1、使用HTML实现视频处理：

video标签

      如果当前浏览器不支持video，可以在veido里面编写提示内
      src - 引入视频文件的路径
      autoplay - 自动播放视频

2）souce元素

         <video>
            <source src="一种视频格式"/>
            <source src="一种视频格式"/>
            <source src="一种视频格式"/>
         </video>

1.2、video支持的视频格式

      MP4 - 目前比较主流
      OGG -  多用于移动端
      WebM - 目前唯一支持超高清格式

1.3、video元素的属性

      src - 视频路径
      autoplay - 自动播放
      controls属性 - 提供视频播放的控制面板，只有属性名，没有属性值
      loop - 视频的循环播放
      poster属性 - 在视频播放之前，显示一张图片
      width/height - 设置显示视频的宽度和高度

      preload - 预加载：
            auto-(默认值)自动加载
            none-不加载
            metadata-只加载视频的基本信息(不含视频)

2、高级内容
2.1、方法

      play() - 播放视频
      pause() - 暂停视频
      load() - 重新加载音频/视频元素
      canPlayType() - 判断当前浏览器是否支持指定视频格式

2.2、事件

      onplay - 当视频开始播放时调用
      onpause - 当视频开始
      onended - 当视频结束时被触发
      onerror - 当视频错误时被触发
      oncanplay - 当整个媒体可以顺利播放时，就会触发这个事件
      oncanplaythrough - 不考虑整体状态，只要下载了一定的可放帧会会触发这个事件
      onprogress - 用于更新媒体的下载进度，会周期性的触发

2.3、属性

      paused - 表示判断当前是否暂停，true表示暂停
      ended - 表示判断当前视频是否播放完毕，true表示播放完毕
      duration - 表示当前视频的时长,单位为s
      currentTime - 表示当前视频播放的位置

2.4、 video元素

      当video视频全屏时，浏览器会把video放到最前端，图片是有显示的，但被视频覆盖了

      利用video事件完成广告效果

         bug: 不能全屏

         解决方案：

         等到HTML5更新
         使用video元素提供的高级编程自己实现
         使用目前封装好的video的JS库 video.js

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)