html编辑器如何实现html5视频上传功能

新建一个带vedio标签的页面，被给vedio的source加上视频连接；

在浏览器中打开，发现一片漆黑，因为视频没有被打开，要给video加上autoplay的属性，如果不需要声音，就加上muted，还可以加上循环播放的loop；

video并没有完全撑满浏览器，在body下加上margin:0，接下来给video加上样式，使之没有scroll，又能撑满全屏，打来浏览器就能看到恰到好处的背景视频了；

在页面中加上文字，会发现该文字并没有显示在页面上，需要调低video的z-index值，这里直接置为-9999。

还可以用-filter属性，来控制video的色调，比如加上-webkit-filter:grayscale(100%)，这样页面中的视频就会显示为灰色调，此属性也使用于图片；

还可以利用video的playbackRate属性来控制video的播放速度，如果要让背景视频以慢速播放的话可以加上下面的javascript

<script>

var video= document.getElementById('v1')

video.playbackRate = 0.5

</script>

，首先要判断拖入的文件是否符合要求，包括图片类型、大小等，然后获取本地图片信息，实现预览，最后上传。

$(function(){

接上部分

var box = document.getElementById('drop_area')//拖拽区域

box.addEventListener("drop",function(e){

e.preventDefault()//取消默认浏览器拖拽效果

var fileList = e.dataTransfer.files//获取文件对象

//检测是否是拖拽文件到页面的 *** 作

if(fileList.length == 0){

return false

}

//检测文件是不是图片

if(fileList[0].type.indexOf('image') === -1){

alert("您拖的不是图片！")

return false

}

//拖拉图片到浏览器，可以实现预览功能

var img = window.webkitURL.createObjectURL(fileList[0])

var filename = fileList[0].name//图片名称

var filesize = Math.floor((fileList[0].size)/1024)

if(filesize>500){

alert("上传大小不能超过500K.")

return false

}

var str = "<img src='"+img+"'><p>图片名称："+filename+"</p><p>大小："+filesize+"KB</p>"

$("#preview")(str)

//上传

xhr = new XMLHttpRequest()

xhr.open("post", "upload.php", true)

xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")

var fd = new FormData()

fd.append('mypic', fileList[0])

xhr.send(fd)

},false)

})

---