微信移动端页面开发之视频开发

前端工程师,专注于前端动画以及小游戏。熟悉 Three.js、Phaser、微信小程序、微信小游戏、Vue、Webpack、Node.js等,有任何问题欢迎骚扰。

文章正文

说起视频相信大家都不陌生,作为前端开发者,我们并不需要关注视频本身;只要做到把视频正常地在页面播放出来,用户体验良好,就完成任务了。听起来好像很简单,但是由于浏览器(特别是移动端)的快速发展,前端视频的处理已经受到了广泛关注。

H5 Video 标签简单介绍

在微信中,视频的处理都是用 HTML5 的 video 标签,所以在讲微信中的视频之前,先来简单回顾一下 HTML5 的 video 标签。

一个最简单的 video 标签,跟图片一样,一个 src 属性中填入视频地址即可。

<video src="video.mp3"></video>

video 支持三种视频格式: Ogg、MPEG4、WebM。每种视频格式都有很多编码方式,video 主要支持的是以下编码:

  1. MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
  2. WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
  3. Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

HTML5 发布后,video 多了几个可配置的属性:

  1. autoplay:视频就绪后马上播放
  2. controls:视频控制的控件是否出现(进度条等)
  3. height:视频播放器的高度
  4. width:视频播放器的宽度
  5. loop: 循环播放
  6. muted:静音
  7. poster:视频封面图
  8. preload: 视频在页面加载时进行加载

在 HTML5 中,一个 video 标签包含的东西就是这些。看到这里,可能有小伙伴就会问了,我在微信中看到的 video 标签,好像不止这些东西呀。

没错,这也是前端处理视频最头疼的地方:各大浏览器的兼容性。

微信中的 Video

那么在微信中的 Video 是怎么样的呢:文档

微信中的视频,多了

作者正在撰写中...
隐藏内容 支付可见
¥1.99 购买
× 订阅 Java 精选频道
¥ 元/月
订阅即可免费阅读所有精选内容