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

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

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

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

1、单个video标签


<html>
<head>
    <meta charset="UTF-8">
    <title>videotitle>
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标签


<html>
<head>
    <meta charset="UTF-8">
    <title>videotitle>
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"";
                }
                $("#video").html(videoContent);

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

                for(var j=0; 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中用到的功能,但是实际测试,不支持部分机型,还希望各路大神不吝赐教,感谢!

你可能感兴趣的:(前端开发)