เป็นการประยุกต์ สามารถดัดแปลง ได้ตามต้อการ
ตัวอย่าง
โค้ดสำหรับทดสอบ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>video</title>
</head>
<body>
<br>
<div style="margin:auto;width:80%;">
<input type="file" name="upvideo" id="upvideo" accept="video/*"/>
<br>
<video id="preview_video" controls autoplay></video>
<br>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" >
$(function () {
$("#upvideo").on("change",function(){
var file = this.files[0]; // เก็บค่าเป็น flistlist object
var video_type = file.type; // ตรวจสอบประเภท video
// ตรวจสอบว่า ถ้าประเภทไฟล์นี้ สามารถแสดง video ได้หรือไม่
var video_canplay=$("#preview_video")[0].canPlayType(video_type);
// ถ้าสามารถแสดงได้
if(video_canplay){
// กำหนด url object อ้างอิงขึ้นกับ browser
var URL = window.URL || window.webkitURL;
var fileURL = URL.createObjectURL(file); // สร้าง url object
$("#preview_video")[0].src = fileURL; // แสดง video จาก url
}else{
// can't play
}
});
});
</script>
</body>
</html>
