HTML5 单个或者多个Video标签视频加载第一帧方法（poster属性）

最新推荐文章于 2024-07-24 21:11:51 发布

悸动菌之梦

最新推荐文章于 2024-07-24 21:11:51 发布

阅读量4.1w

点赞数 3

分类专栏：前端开发文章标签： html5 视频 video标签视频加载第一帧

本文链接：https://blog.csdn.net/weixin_38597686/article/details/77992921

版权

前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近在做这个前端视频加载第一帧的功能，查了很多资料基本上有两种思路：

一、canvas画图取base64格式编码设置poster属性的方法；
二、给定图片设置在视频上方，点击图片隐藏起来，视频追加播放事件。

我就在此提供方法一所需要的代码，也是自己用到的，不足之处，还望指教。

1、单个video标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>video</title>
</head>
<body>
<video id="video" controls="controls" src="YOUR VIDEO URL">
    很抱歉，您的浏览器不支持播放标签!
</video>
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    (function() {
        "use strict";//严格模式
        var video;//video标签
        var scale = 0.8;//第一帧图片与源视频的比例
        video = $("#video").get(0);//赋值标签
        video.on("loadeddata", function () {//加载完成事件，调用函数
            var canvas = document.createElement("canvas");//canvas画布
            canvas.width = video.videoWidth * scale;
            canvas.height = video.videoHeight * scale;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);//画图
            video.setAttribute("poster", canvas.toDataURL("image/png"));//关键一步 —— 设置标签的 poster 属性的值为 base64 编译过后的canvas绘图。
            })
    }());
</script>
</body>
</html>

2、多个video标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>video</title>
</head>
<body>
<div id="video">

</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    $.ajax({
        url: "",
        data: "",
        success: function (data) {
            var videoContent = "";//声明锅子接收后台返回列表
            var count = 0; //声明变量 为了拼接不同的ID值方便查找添加poster属性值
            var list = data.list;
            if(list.length>0){//这些大家应该都知道，是后台返回值，我们遍历。
                for(var i=0;i<list.length;i++){
                    videoContent+="<video  id='videoId"+count+"' src='"+list[i].url+"'controls width='100%' ></video>";
                }
                $("#video").html(videoContent);

                //敲黑板 重点来了 就不注释了、跟单个video标签差不多。

                for(var j=0; j<count; j++) {
                    $("#videoId"+j).on("loadeddata", function (e) {
                        var obj = e.target;
                        var scale = 0.8;
                        var canvas = document.createElement("canvas");
                        canvas.width = obj.videoWidth * scale;
                        canvas.height = obj.videoHeight * scale;
                        canvas.getContext('2d').drawImage(obj, 0, 0, canvas.width, canvas.height);
                        obj.setAttribute("poster", canvas.toDataURL("image/png"));
                    } )
                }

            }else{
                alert("没有查到视频内容");
            }
        },
        error: function () {
            alert("emmmmmmm...")
        }
    })
</script>
</body>
</html>

注：移动端项目webApp中用到的功能，但是实际测试，不支持部分机型，还希望各路大神不吝赐教，感谢！

悸动菌之梦

关注

3
点赞
踩
23

收藏

觉得还不错? 一键收藏
11
评论
HTML5 单个或者多个Video标签视频加载第一帧方法（poster属性）

最近在做这个前端视频加载第一帧的功能，查了很多资料基本上有两种思路：一、canvas画图取base64格式编码设置poster属性的方法；二、给定图片设置在视频上方，点击图片隐藏起来，视频追加播放事件。我就在此提供方法一所需要的代码，也是自己用到的，不足之处，还望指教。1、单个video标签<!DOCTYPE html><html><head> <meta charset="UTF-
复制链接

扫一扫

专栏目录