PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


preview video ก่อน อัพโหลด ด้วย html5 อย่างง่าย

28 September 2014 By Ninenik Narkdee
html5 video preview อัพโหลด

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ html5 video preview อัพโหลด



ตัวอย่างโค้ดต่อไปนี้ เป็นการใช้งาน html5 เกี่ยวแสดง video preview ก่อนอัพโหลด
เป็นการประยุกต์ สามารถดัดแปลง ได้ตามต้อการ

ตัวอย่าง







โค้ดสำหรับทดสอบ

<!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>






Tags:: อัพโหลด video preview html5




เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



หริอ สมัครสมาชิก และล็อกอิน ด้วย Facebook



อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง