html5上传视频图片的简单介绍

如何HTML5 在网页显示本机摄像头图像的问题

HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。

1、 视频流

HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia （请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。

video id=”video” autoplay=”"/video

script

var video_element=document.getElementById(‘video’);

if(navigator.getUserMedia){ // opera应使用opera.getUserMedianow

navigator.getUserMedia(‘video’,success,error); //success是回调函数,当然你也可以直接在此写一个匿名函数

}

function success(stream){

video_element.src=stream;

}

/script

此时，video 标签内将显示动态的摄像视频流。下面需要进行拍照了。

2、 拍照

拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。主要代码如下：

var canvas=document.createElement(‘canvas’); //动态创建画布对象

var ctx=canvas.getContext(’2d’);

var cw=vw,ch=vh;

ctx.fillStyle=”#ffffff”;

ctx.fillRect(0,0,cw,ch);

ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //将video对象内指定的区域捕捉绘制到画布上指定的区域，可进行不等大不等位的绘制。

document.body.append(canvas);

3、 图片获取

从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。

var imgData=canvas.toDataURL(“image/png”);

这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。

第一种：是在前端截取22位以后的字符串作为图像数据，例如：

var data=imgData.substr(22);

如果要在上传前获取图片的大小，可以使用：

var length=atob(data).length; //atob 可解码用base-64解码的字串

第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串（也就是在前台略过上面这步直接上传）。例如PHP里：

$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);

4、 图片上传

在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时可以用：

$.post(‘upload.php’,{‘data’:data});

在后台我们用PHP脚本接收数据并存储为图片。

function convert_data($data){

$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);

save_to_file($image);

}

function save_to_file($image){

$fp=fopen($filename,’w');

fwrite($fp,$image);

fclose($fp);

}

相关问答

Q1: html网页中怎么添加视频？

第一步：首先下载video.js，百度一下就能找到。

第二步：先把要用到的js\css\swf都加载到html页面上。

第三步：加入下面的代码：

video id="my_video_1" class="video-js vjs-default-skin" controls    preload="auto"width="640"height="480"poster="video-js/my_video_poster.png"    data-setup="{}"

source src="Wildlife.mp4" type='video/mp4'

/video

只要记住：修改width="640" height="480"来改变视频显示大小，修改src="Wildlife.mp4"来改变要显示的视频。

第四步：然后打开html文件查看效果吧，它有暂停、音量控制、全屏等功能，还有好多其他功能，比如字幕等，这个以后再写。

第五步：全屏后的效果：

一、html5和html有什么区别：

学了html5就不用学习html了，因为html5是html的升级。

二、如何做HTML页面：

下面是一个简单的HTML页面

HTML

HEAD我的第一个HTML页面/HEAD

BODY这就是HTML页面..../BODY

/HTML

复制上面代码到记事本中，然后将记事本的后缀名改为.html

大功告成！

Q2: 自己创建网页，怎样才能上传视频到自己的网页呢?

上传视频到自己的网页的注意事项以及操作思路：

视频放到网站根目录访问就能播放了。上传视频到FTP服务器，是针对上传视频到tomcat下并播放完善的，毕竟上传到tomcat目录下的话，放几个视频文件磁盘就满了，所以存到另外的服务器是必然的。

由于video．js里播放视频的标签不支持绝对路径（如D：／这样的），只能存放在tomcat下面的相对路径，所以跳过了存放其他磁盘的步骤，直接开始试验FTP服务器了。

首先呢，当然是建立FTP服务器，要开两个端口号去建立两个FTP，

一个用来上传（需要用户名密码登录，设置写入权限、读取权限），一个用来播放（可以匿名访问，设置读取权限）。

注意在项目中下载时，将文件从ftp服务器下载到应用服务器，流写出去然后删除应用服务器的文件，以避免应用服务器压力

扩展资料：

常见网页设计上传视频工具软件：

Amaya（单位：万维网联盟）用于编辑HTML、CSS、数学标记语言、可缩放矢量图形的工具；

Dreamweaver（单位：奥多比）用于编辑HTML、ASP、JSP、PHP的辅助工具；Frontpage（单位：微软）跟Dreamweaver一样；

FLASH（单位：奥多比）网页需要画面流动（动画）时的首选择。

还需要租借比较大的服务器，因为视频上传需要比较大的储存空间；需要设计下网站上的上传的ui设计，这个是需要方便用户上传；还需要建立我们的数据库，来存储的数据库支撑我们的网站。

参考资料：百度百科-网页

Q3: 怎么在HTML网页中插入视频

向HTML中插入视频有两种方法，一种是古老的object标签，一种是html5中的video标签。

前者兼容性相对好些，后者兼容性让人头疼。

示例如下：

video width="602px" height="345px" controls="controls"

source src="public/video/test.mp4" type="video/mp4"/source

source src="public/video/test.ogg" type="video/ogg"/source

your browser does not support the video tag

/video

当前，video 元素支持三种视频格式：

格式 IE Firefox Opera Chrome Safari

Ogg No 3.5+ 10.5+ 5.0+ No

MPEG 4 9.0+ No No 5.0+ 3.0+

WebM No 4.0+ 10.6+ 6.0+ No 

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 

注：格式必须符合上面三条详细要求，比如MPEG 4，必须是H.264视频和AAC音频。

扩展资料：

HTML

超文本标记语言，标准通用标记语言下的一个应用。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

参考链接：HTML_百度百科

html5上传视频图片的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于、html5上传视频图片的信息别忘了在本站进行查找喔。