apicloud apicloud

注册
查看: 15926|回复: 39

[APP开发技巧] APICloud + html5 开发视频app功能讲解(video标签)

 

主题:
53
帖子:
333
云币:
552

APICloud粉丝APICloud毕业勋章一周年

[APP开发技巧] APICloud + html5 开发视频app功能讲解(video标签)

 
15926 39 | 发表于 2015-7-28 14:25:35 |阅读模式 | |
本帖最后由 流浪男 于 2015-7-28 14:41 编辑
最近发现很多小伙伴的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上操作造成卡顿。

1

查看全部评分

马路杀手

UID:100205

主题:
89
帖子:
223
云币:
976

中秋节

发表于 2015-11-18 15:37:37 |
怎么手机上video标签的视频显示不了啊?楼主手机上可以?求助啊

主题:
8
帖子:
323
云币:
4029

中秋节APICloud粉丝女朋友单身狗

发表于 2015-7-28 14:36:40 |
赞一个

驾校小白

UID:128991

主题:
2
帖子:
4
云币:
7
发表于 2015-7-28 14:37:58 |
真机同步测试的时候只有声音,没有图像。请问这是怎么回事?

主题:
13
帖子:
185
云币:
1253
发表于 2015-7-28 15:42:30 |
apicloud支持video标签?

业余车手

UID:22235

主题:
89
帖子:
1166
云币:
10259

版主勋章APICloud粉丝端午节

发表于 2015-7-28 16:48:12 |
暂一个,顶起!

主题:
59
帖子:
653
云币:
689

APICloud粉丝土豪版主勋章端午节

发表于 2015-7-28 19:36:10 |
顶,APICloud需要解决一下安卓加密包无法播放widget或fs下视频的问题

实习司机

UID:20696

主题:
56
帖子:
219
云币:
373
发表于 2015-7-28 21:36:02 |
SYJK 发表于 2015-7-28 14:37
真机同步测试的时候只有声音,没有图像。请问这是怎么回事?

我也是这样,小米4

实习司机

UID:20696

主题:
56
帖子:
219
云币:
373
发表于 2015-7-28 21:36:52 |
ACFans51 发表于 2015-7-28 19:36
顶,APICloud需要解决一下安卓加密包无法播放widget或fs下视频的问题

我也遇到这个问题了

主题:
13
帖子:
296
云币:
53
发表于 2015-7-31 08:00:40 |
谢谢大神

驾校小白

UID:71191

主题:
2
帖子:
5
云币:
29
发表于 2015-8-17 08:04:06 |
这个用的是node。js吗?
12345下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表