這篇文章給大家詳細介紹H5中video取得第一幀作為封面的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
1.引入庫
#程式碼如下(範例):
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
2.HTML部分
<p class="upload-title mg-b10 title-all">上传视频(必填)</p> <p class="file-input-trigger" onclick="document.getElementById('uploadBtn').click()"> <p class="upload-icon">+</p> <p class="upload-text">上传文件</p> </p> <input type="file" class="upload-video" id="uploadBtn"> </p>
展示效果如下圖,樣式的話,自己寫哈,我比較懶,哈哈哈哈
<video src="" onloadeddata='vSetImg(this)' autoplay> </video> <img src="" class="video-img" alt="">
上面這部分程式碼是展示圖片,效果如下,圖片顯示正常
#3.JS部分
let result$('#uploadBtn').on('change', function (e) { const file = e.target.files // console.log(file) let fr = new FileReader() fr.readAsDataURL(file[0]) //将文件读取为tata Url fr.onload = function (e) { result = e.target.result // 视屏上传 if (/video/g.test(file[0].type)) { $('.upload-img').show() $('.upload-img video').attr('src', result) $('.upload-file').hide() } }})function vSetImg(obj) { $(obj).removeAttr("poster"); var vimg = $("<img / alt="H5中video取得第一格如何作為封面" >")[0]; captureImage(obj, vimg); $(obj).attr("poster", $(vimg).attr("src")); //展示获取的第一帧图片 $(".upload-img img").attr("src", $(vimg).attr("src")); $('.upload-img video').hide() $('.upload-img img').show()}function captureImage(video, output) { const scale = 0.8 try { var videocanvas = $("<canvas/>")[0]; videocanvas.width = video.videoWidth * scale; videocanvas.height = video.videoHeight * scale; videocanvas.getContext('2d').drawImage(video, 0, 0, videocanvas.width, videocanvas.height); output.src = videocanvas.toDataURL("image/png"); delete videocanvas; } catch (e) { output.src = "加载动画.gif"; }}
其中video標籤上的屬性autoplay是必要的,不然可能會圖片顯示不出來,這是我實驗幾次發現的。我是使用了jquery,為了操作元素方便,當然用原生的也可以。
推薦學習:html影片教學
以上是H5中video取得第一格如何作為封面的詳細內容。更多資訊請關注PHP中文網其他相關文章!