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 aut泠贾高框oplay 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上操作造成卡顿。