APICloud + html5 开发视频app功能讲解

1、一、认识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等

2、二、视频的操作(代码里面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静音

3、三、利用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上操作造成卡顿。