# Wechat-video

**Repository Path**: sallypanda/wechat-video

## Basic Information

- **Project Name**: Wechat-video
- **Description**: 主要应用于微信环境下的安卓，ios，或pc端，可以实现任意尺寸的全屏播放或局部播放，并可以在视频上叠加任意的交互元素(例如图片，画布或普通DOM元素等)。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 0
- **Created**: 2017-05-01
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#轻量级的微信全屏视频播放类

主要应用场景为现在微信上流行的视频类H5。

**点击查看[在线demo](http://sallypanda.oschina.io/wechat-video/)**

##使用说明：

1. 初始化
    ```html
    <script src="js/video.js"></script>
    <script>
    //初始化视频类
    var videoObj = new VideoClass(".web","media/final.mp4");
    </script>
    ```
    **代码说明:**
    ```html
    /**
     * 视频类构造器
     * @param parentDom          视频初始化所在的父元素
     * @param url                视频地址
     * @param fixMode            暂时只有三种适配选择，1,宽自适应  2,高自适应 3,自由模式(自定义宽度，高度等比例缩放,但移动端不适用)
     * @param width              视频播放器宽度
     * @param height             视频播放器高度
     * @constructor
     */
    function VideoClass(parentDom,url,fixMode,width,height)
    ```

2. 播放
    ```javascript
    videoObj.play();
    ```
    **代码说明**
    ```javascript
    /**
     * 播放
     */
    /**
     * @param playEndCallback       播放完毕回调
     * @param loadedCallback        加载完成后的回调
     */
    VideoClass.prototype.play = function(playEndCallback,loadedCallback)
    ```
3. 暂停
    ```javascript
    videoObj.pause();
    ```
4. 停止
    ```javascript
    videoObj.stop();
    ```
5. 获取视频时长
    ```javascript
    videoObj.getFormatTime();
    ```
##对外可访问属性
1. 视频的链接
    ```javascript
    videoObj.url
    ```
2. 视频的状态
    ```javascript
    videoObj.status
    ```
3. 视频的时长
    ```javascript
    videoObj.duration
    ```
    需要在播放后才能正确获取，安卓同样是不支持的😁
    
##开启DEBUG模式
```
引入vconsole.min.js
<script src="js/vconsole.min.js"></script>  
 
开启debug模式
videoObj.debug = true;	//开启调试模式
```

在ios设备上可以查看下载进度、视频总时长和视频状态变化(也只有ios和PC端支持)

##说说遇到的坑
1. video.duration,必须在canplay侦听事件里获取，或者在定时器里判断readyState>2的时候获取才行，其余地方会有问题（例如NaN，或获取失败),安卓没办法获取。

2. 如果本地局域网测试视频，还要注意的就是ios和安卓手机上貌似不支持局域网的相对地址和绝对地址(例如192.168.199.20/test.mp4),会播放不了，但在电脑上，或线上测试，是正常的。呵呵！

3. 关于video.[readyState说明](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState)，简单讲就是，0没有任何数据，1获取到基本视频信息，2当前位置的数据加载好了，3除了当前位置，还把后面的数据也加载了（也就是缓冲了一部分，减少卡顿的情况），4，完全加载(虽然视频不卡了，但很久啊兄弟),但后来发现并不靠谱，各大厂商暂时没有依照标准来做，所以大部分情况下，只要视频创建出来，则readyState就为4了。

4. 除了ios可以做到计算加载百分比，安卓没办法获取到视频时长和缓冲位置，而PC必须边播放边下载没办法做预加载，所以结论就是视频没办法做预加载！！！！！
 
##参考资料
[移动端HTML5<video>视频播放优化实践](http://www.xuanfengge.com/html5-video-play.html)   

[兼容Android的html5移动端视频播放video全屏处理/自动播放/播放控制/隐藏播放控件](http://www.xyhtml5.com/3252.html)

[](http://blog.csdn.net/qq_16494241/article/details/62046891)