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

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
video อัพโหลด preview html5

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

ดูแล้ว 6,047 ครั้ง


ตัวอย่างโค้ดต่อไปนี้ เป็นการใช้งาน 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>


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








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

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

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

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



( หรือ เข้าใช้งานผ่าน Social Login )




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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ