APICloud + html5 开发视频app功能讲解（video标签） - APICloud移动应用开发平台

最近发现很多小伙伴的app已经都有视频播放的功能了，如果不想使用原生模块那么如何用html5 来做一个视频播放呢。应几个小伙伴的邀请就写个简单的教程来说一下，大家后面可以自己扩展下

一、认识video标签这个是html5的新增视频标签，可以帮助我们完成视频的播放、暂停等工作，在DOM对象模型中提供了对应的DOM节点，我们可以通过js来获取节点的操作和响应事件等。

<video id="video001" loop autoplay src="video001.mov"></video>

上面是一个简单的video标签案例，可以控制视频循环，自动播放

比较常用的标签属性 width: 宽度 height: 高度 src:视频地址 autoplay: 自动播放 loop循环播放 muted静音 controls控制面板

video支持的视频格式有 webm、mov、mp4、ogv等

二、视频的操作(代码里面onclick事件加上自动保存的时候就没了，使用的时候自己加上)

<video id="video001" loop autoplay src="video001.mov"></video>
<button>play</button>
<button>pause</button>
<button>muted</button>
<button>volume100</button>

播放功能

function play(){
        var videoNode = $api.byId("video001");
        videoNode.play();
}

暂停

function pause(){
        var videoNode = $api.byId("video001");
        videoNode.pause();
}

静音

function muted(){
        var videoNode = $api.byId("video001");
        videoNode.muted = true;
        videoNode.volumg = 0.0;
}

恢复声音

function volume100(){
        var videoNode = $api.byId("video001");
        videoNode.muted = false;
        videoNode.volumg = 1.0;
}

常用的节点属性和方法有 play()视频播放 pause()视频暂停 volume视频音量的控制 currentTime视频播放进度 muted静音

三、利用html5 生成一张视频截图

视频模块都会用到一张视频截图的，在H5之前生成一张视频截图会使用大量代码，要不就自己手动截一张，下面教大家如果用canvas标签来生成截图。

canvas会将视频数据切割成一个个的图片数据，然后我们就可以通过其来做一些加工处理，先看一下代码：

<video id="video001" loop autoplay src="video001.mov"></video>
<button>print</button>

function print(){
        var videoNode = $api.byId("video001");
        var canvasNode = document.createElement("canvas");
        canvasNode.width = 568;//这里就是控制画布的宽度和高度
        canvasNode.height = 320;

        var canvasContext = canvasNode.getContext("2d");
        canvasContext.drawImage(videoNode, 0, 0);

        var imgNode = new Image();
        imgNode.src = canvasNode.toDataURL();

        $api.append(api.dom("body"),imgNode);//输出预览一下
}

这个缩略图的生成我们可以用在上传视频的时候生成，避免在app上操作造成卡顿。

原文链接: http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=10802