js怎么做本地的视频文件的预览

JavaScript09

js怎么做本地的视频文件的预览,第1张

用这个方法：varWordApp=newActiveXObject("Word.Application")//注：IE的ActiveX安全性能放开才行WordApp.Application.visible=falsevarDoc=WordApp.documents.open(path)//对word的操作见office的MSDNWordApp.quit()

<input type="file" accept="video/*" onChange={this.previewVideo} />

<video id="myVideo" autoPlay width="300" />

使用FileReader读取转为Data URL：

previewVideo = (file) => {

    // 建议判断下视频大小及格式，太大的可能会有问题

    const reader = new FileReader()

    reader.onload = (evt) => {

      const myVideo = document.querySelector("#myVideo")

      myVideo.src = evt.target.result

    }

    reader.readAsDataURL(file)

}

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>Document</title>

<script src="jquery-3.1.1.min.js"></script>

</head>

<body>

<h3>请选择图片文件：JPG/GIF</h3>

<form name="form0" id="form0" >

<input type="file" name="file0" id="file0" multiple="multiple" />

<br><br><img src="" id="img0" width="120">

</form>

</body>

<script>

$("#file0").change(function(){

var objUrl = getObjectURL(this.files[0])

console.log("objUrl = "+objUrl)

if (objUrl)

{

$("#img0").attr("src", objUrl)

$("#img0").removeClass("hide")

}

})

//建立一个可存取到该file的url

function getObjectURL(file)

{

var url = null

if (window.createObjectURL!=undefined)

{ // basic

url = window.createObjectURL(file)

}

else if (window.URL!=undefined)

{

// mozilla(firefox)

url = window.URL.createObjectURL(file)

}

else if (window.webkitURL!=undefined) {

// webkit or chrome

url = window.webkitURL.createObjectURL(file)

}

return url

}

$('input').on('change',function(){

var value = $(this).val()

value = value.split("\\")[2]

alert(value)

})

</script>

</html>