Skip to content

Latest commit

 

History

History
139 lines (92 loc) · 4.64 KB

README.md

File metadata and controls

139 lines (92 loc) · 4.64 KB
Raw

H5Video.js

介绍

在HTML5手机平台项目中，我们经常使用Video视频来展示产品效果。但使用HTML原生的

解决思路

IOS 微信内：

支持

IOS 非微信：

例如iphone下的微博，QQ浏览器等。 使用了iphone-inline-video项目,这个项目利用修改ios下视频播放器样式的方法来屏蔽弹出，效果还不错。

安卓 微信内：

因为微信安卓版使用了腾讯X5内核，因此可以使用X5的相关属性playsinline x-webkit-airplay，x5-video-player-type，x5-video-player-fullscreen

安卓 非微信：

例如安卓下的微博，QQ浏览器等。 使用了canvas重新绘制视频内容的做法JSMpeg。但因为文件过大渲染和加载非常慢卡顿严重，因此我建议视频每帧控制在1500kbs，但尺寸只导出原来的一半。

使用方法：

  1. 首先压缩两套视频文件.
  • .mp4视频文件：推荐开源软件handbrake.fr,这个文件将会用于IOS两个版本和安卓版微信。
  • .ts视频文件：使用ffmpeg进行压缩，这个文件将会用于安卓非微信环境下，诸如微博，手Q，天猫app等等.
  • 注意：因为我个人使用typescript开发环境所以，.ts视频文件和项目开发代码冲突。所以我手动改成.vid文件。
  1. FFMPEG我的压缩率是这样的：
    ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -s 375x667 -b:v 1500k -r 30 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k out_qurt.ts

我把尺寸压缩到原来的四分之一，即宽高各是原尺寸视频的一半，但我每秒kbs控制在1500k,这样还原回来的视频清晰度良好。

  1. 引入组件代码
    <script src="iphone-inline-video.min.js"></script>
    <script src="jsmpeg.min.js"></script>
    <script src="H5Video.js"></script>
    var h5vid = new H5Video();
    h5vid.init("mp4视频地址用于video标签", "ts视频地址用于canvas", "#videoContainer");

API:

  • init(mp4,ts,videoContainer);

mp4:mp4视频地址用于video标签,必须。 ts:ts视频地址用于canvas,选填，如果不需要适配微博就不用放ts文件。 videoContainer，设置放入组件的html容器。

  • play(); 视频播放

  • pause(); 暂停

  • seek(time); 跳转到某时间

  • destroy(); 销毁

  • mute(bool); 是否静音；true为静音，false为不静音

  • isIos(); 是否ios设备；true为ios

  • isInWX(): 是否在微信里播放；true为微信

H5VideoController控件

使用方法：

  1. html页面引入组件代码
    <script src="iphone-inline-video.min.js"></script>
    <script src="jsmpeg.min.js"></script>
    <script src="H5Video.js"></script>
    <script src="H5VideoController.js"></script>

   var timeConfig = [
          {
              time: 2.0, handle: function () {
              console.log("point1要做的事情")
          }
          }, {
              time: 5.0, handle: function () {
                  console.log("point2要做的事情")
              }
          }, {
              time: 8.0, handle: function () {
                  console.log("point3要做的事情")
              }
          },
      ]


      var h5VidController = new H5VideoController();
      h5VidController.start(h5vid.player, timeConfig);

API:

  • start(_player, _config) 开始监控，指定有效的player组件和config配置；config里必须包含time和handle来设置什么时间出发什么事件，精读为0.1秒。

  • stop() 停止监控

感谢