直播帶貨app原始碼，獲取直播影片的第一幀

雲豹科技曉彤發表於2021-07-22
APP原始碼

只能轉換直播帶貨app 原始碼的 .mp4 檔案
很多影片第一幀是黑屏，最好是交給後端處理

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

<input type="file" accept="video/mp4" />

<img src="" id="firstV" alt="" style="width: 100px">

</body>

<script>

 

    function chooseVideo(e) {

        var file = e.files[0];

        var blob = new Blob([file]), // 檔案轉化成二進位制檔案

            url = URL.createObjectURL(blob); // 轉化成 url

 

        // 建立 video 標籤

        var videoElement = document.createElement("video");

        videoElement.src = url

        videoElement.addEventListener("canplay", function() {

            var canvas = document.createElement("canvas");

            canvas.width = videoElement.videoWidth;

            canvas.height = videoElement.videoHeight;

            canvas.getContext("2d").drawImage(videoElement, 0, 0, canvas.width, canvas.height);

            var firstFrame = canvas.toDataURL("image/png") // 第一幀圖片 url

            document.getElementById("firstV").src = firstFrame

        })

    }

</script>

</html>

 

宣告：本文由雲豹科技轉發自 【03 】 部落格，如有侵權請聯絡作者刪除

 


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/70002045/viewspace-2782784/，如需轉載，請註明出處，否則將追究法律責任。

相關文章