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

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

一、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中用到的功能，但是实际测试，不支持部分机型，还希望各路大神不吝赐教，感谢！

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

HTML5 页面video标签视频加载播放空白
bug现象 : 空白原因 : video标签不支持我自己视频的编码格式注: 此处所说的编码格式不是指文件后缀 mp4 , RMVB , avi等 , 同一种后缀视频也会有不同编码格式 video标 ...
video标签视频有声音无图像处理方法
<video id="example" class="video" controls preload="none" width=&qu ...
ios html5 自动全屏播放,禁止iPhone Safari video标签视频自动全屏的办法
最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签). 如: 在iPhone safari 点击视频会弹出播放器进行全屏播放. 在网上看 ...
video 满屏显示_微信video标签视频设置全屏属性
微信video标签视频设置全屏属性,支持安卓和ios系统的视频控制器和播放按钮隐藏和视频全屏,微信使用的内核是X5 x-webkit-airplay="true" x5-video ...
[html] HTML5的video怎样预加载（支持全量加载）？
[html] HTML5的video怎样预加载(支持全量加载)? preload="auto" 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎 ...
uniapp m3u8格式视频加载
uniapp一:mui-player:三方 h5 web app uniapp 使用 mui-player 插件播放 m3u8/flv 视频流_翘翘红的博客-CSDN博客 uniapp 开发的h5项 ...
OpenCV4每日一练day7：视频加载、摄像头调用、视频文件保存
一.视频加载(读取)/摄像头调用使用的是同一个函数:VideoCapture( ) get函数使用,如video.get(CAP_PROP_FOURCC) 视频实时显示与播放:video>> ...
微信小程序-首屏视频加载
项目场景: 微信小程序开发: 实现小程序首页视频预加载功能 1.获取设备的宽和高度 2.小程序video的使用获取设备的宽和高度 // 获取设备的宽和高度getsize() {let that = ...
在html中怎么插入腾讯视频,腾讯视频加载方案, 网页嵌入腾讯视频方式 iframe, 网页嵌入腾讯视频方式...
前言:更多详细内容可以参考腾讯开发平台的文档,我在这里简单备忘一下方法一:引入iframe 在视频播放界面的左下方,鼠标移动到分享,复制通用代码放在页面上即可腾讯视频加载方案, 网页嵌入腾讯视频方 ...

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

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

最新文章

热门文章