APICloud + html5 开发视频app功能讲解(video标签)
发布在APICloud移动应用开发平台2015年8月28日view:4327
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

最近发现很多小伙伴的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

评论
发表评论
暂无评论
WRITTEN BY
小金宝同學coolboy
我就是太阳无需凭借谁的光!
TA的新浪微博
PUBLISHED IN
APICloud移动应用开发平台
  • 7天开发APP,重新定义移动应用开发。
  • 可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。
  • 云API:减少70%服务器端编码工作量,同时提供推送、云修复、大数据分析等服务。
  • 端API:“积木拼装”式的开发跨平台APP,为APP开发者提供大量优质的原生模块,涵盖UI、系统、交互、影音、支付等类型的原生模块。
  • 模块store:“模块Store”通过提供“1+1”的服务(一站式+一键集成),让APP开发以及第三方服务SDK的集成变得非常简单,可以像逛超市一样在APICloud“模块Store”挑选自己中意的第三方服务,只需在线一键绑定,就可以实现不同服务的快速集成。
  • 官方网站:www.apicloud.com

友情链接 大搜车前端团队博客
我的收藏