微信小程序录音界面以及功能实现

html-css013

微信小程序录音界面以及功能实现,第1张

pick一下最终效果,然后一步一步来。

先把界面效果做出来。

wxml

wxss

js赋值

这里我的录音按钮点击扩散效果用的是纯css实现,而上方progress是使用animation实现的。

你的

意思就是说

你摄像,把摄像文件的影片

,放到网页上。然后通过扫码,进入网页,看视频的目的是不是

请问你有网站吗

有网站的话

,我可以免费告诉你。

第一步

,在你的网站

里面建立一个文件夹,里面分别创建一个.html文件,.css

文件,就一个网页,图片就不创建文件夹,直接放在这个文件夹里面就可以了。

第二步,就是网页的制作了,这里我不能说怎么做

,因为不知道你要什么风格的。你可以和我说

,我可以告诉你。

第三步,把你的视频文件,放到文件夹里面。通过这个代码,<video

src="文件的路径地址和文件后缀名"

width="视频宽度"

height="高度"></video>

还有一些其它属性

你自己去查吧

,比如自动播放

,静音什么的。

第四步,就是二维码的制作。为了方便可以直接用

二维码生成器

按照里面的操作

人人都应该会。

第五步,把二维码发给

朋友就可以了。

当然我说了

你也不一定会做。其实

你如果不会做,可以找人做

。如果你看太贵的话

,回来在找我,我给你便宜点。

1、首先新建一个HTML文档,如图所示。

2、然后在body标签里输入video标签。

3、接着在video标签内输入controls="controls",如图所示。

4、然后在video标签里输入<source>,接着在<source>内输入src="medias/volcano.ogg",如图所示。

5、然后在后面输入type="video/ogg"如图所示,然后在定义一个source标签。

6、在标签内输入src="medias/volcano.mp4" type="video/mp4"如图所示。

7、最后按f12预览就可以看到视频播放器了。