ckplayer 播放器 默认第一帧为封面

ckplayer 如何设置默认第一帧为封面啊,或者默认视频为封面,(而不是要另外上传一张封面图来做封面)。在哪里可以设置。因为每次都要上传一张图太麻烦了。

0

4个回答

对了。还应该在初始时设置静音,暂停之后再取消静音

            var videoObject = {
                container: '#video', //容器的ID或className
                variable: 'player', //播放函数名称
                loaded: 'loadedHandler', //当播放器加载后执行的函数
                autoplay: true, //是否自动播放
                video: 'http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4'
            };
            var player = new ckplayer(videoObject);
            function loadedHandler() {
                player.videoMute();
                player.addListener('time', timeHandler); //监听播放时间
            }
            function timeHandler(time) {
                if (time>0) {
                    player.removeListener('time', timeHandler); //移除监听播放时间
                    player.videoPause();//暂停
                    player.videoEscMute();
                }
            }
0

ckplayer中没有现成的这种设置。
不过可以先设置自动播放,在开始播放后让它马上暂停。类似这样

            var videoObject = {
                container: '#video', //容器的ID或className
                variable: 'player', //播放函数名称
                loaded: 'loadedHandler', //当播放器加载后执行的函数
                autoplay: true, //是否自动播放
                video: 'http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4'
            };
            var player = new ckplayer(videoObject);
            function loadedHandler() {
                player.addListener('time', timeHandler); //监听播放时间
            }
            function timeHandler(time) {
                if (time>0) {
                    player.removeListener('time', timeHandler); //移除监听播放时间
                    player.videoPause();//暂停
                }
            }
0

用ffmpeg提取视频中某一帧作为封面的图片:https://www.cnblogs.com/lnice/p/6676606.html

0

这个比较详细
https://blog.csdn.net/jw20082009jw/article/details/53868909

之后你就可以用ckplayer的videocover属性设置封面了。

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
ckplayer播放器设置默认封面时部分浏览器不能正常显示封面图片问题的处理
在使用ckplayer播放器时,页面加载后视频默认不自动播放,此时想要给视频设置一个默认的封面图片,否则视频会漆黑一片,如下图所示,影响页面的整体美观性, ckplayer也提供了响应的设置方法,可以在代码中设置相应的参数,如下图: 这样在部分浏览器中即可以正常显示设置的封面图片了,但在有些浏览器中(经测试,目前发现Google、Edge、猎豹等)还是不行,需要点击一次播放按钮
ckplayer 播放器 默认第一帧为封面
ckplayer 如何设置默认第一帧为封面啊,或者默认视频为封面,(而不是要另外上传一张封面图来做封面)。在哪里可以设置。因为每次都要上传一张图太麻烦了。
视频播放中经常会用到截取第一帧图片来当做默认背景图的功能
#pragma mark ---- 获取图片第一帧   - (UIImage *)firstFrameWithVideoURL:(NSURL *)url size:(CGSize)size   {       // 获取视频第一帧       NSDictionary *opts = [NSDictionary dictionaryWithObject:[NSNumber numberWi
JavaScript设置显示video第一帧
注意事项: 服务端必须要有access字段来同意你的跨域请求(https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image) 必须服务器环境下调试,本地无法调试(比如 file: 开头的) 视频文件所在的域和图片和页面所在域必须相同 示例代码 <html> <head> <title&g...
根据视频地址获取视频的第一帧画面做为封面
关于这一类的文章网上也是很多的,只是在复制黏贴别人代码的时候竟然直接崩溃了……这就很蛋疼了!public Bitmap getBitmapFormUrl(String url) { MediaMetadataRetriever retriever = new MediaMetadataRetriever(); retriever.setDataSource(url); //g
在Android中如何获取视频的第一帧图片并显示在一个ImageView中
String path  = Environment.getExternalStorageDirectory().getPath(); MediaMetadataRetriever media = new MediaMetadataRetriever(); media.setDataSource(path+"/123.rmvb"); Bitmap bitmap = media.getFr
VideoView在播放之前显示视频第一帧
效果图:   实现思路:把VideoView放在RelativeLayout中,写一个ImageView覆盖VideoView,size与VideoView设置的一样,未获取到第一帧时隐藏ImageView,获取到第一帧之后显示ImageView并使用setImageBitmap方法显示第一帧。 OK,思路清楚之后开始实现: 1.xml布局: <RelativeLayout ...
android获取视频第一帧图片作为封面
使用Glide获取视频第一帧 Glide真的是好强大~~ 首先我们需要导入 dependencies { ........ ....... compile 'com.github.bumptech.glide:glide:4.0.0' } 然后 当当当当当 /** * 加载第四秒的帧数作为封面 * url就是...
H5上传视频,截取视频第一帧作为视频封面,遇到的坑
上传视频,进行预览,截取图片,并且获取时长 点击截图 function changFile(ele) { var videoFile = ele.files[0]; var url = URL.createObjectURL(videoFile); console.log(url); var
HTML5的多个video标签:截取视频源的封面图poster,监听视频播放状态的功能
我们是否也会遇到过,有些浏览器在显示这标签,兼容不太友好,video标签的封面是一层黑色的,而不是视频的封面图。 那么,此时,我们就得截取每个视频的封面图来,因为video标签有个属性poster是用来储存封面图地址的,但需注意先用本地视频,非本地视频会有跨域截取问题,这个得跟后端开发协作处理。
根据视频地址获取视频的第一帧画面做为封面 IllegalArgumentException
关于这一类的文章网上也是很多的,只是在复制黏贴别人代码的时候竟然直接崩溃了……这就很蛋疼了! public Bitmap getBitmapFormUrl(String url) { MediaMetadataRetriever retriever = new MediaMetadataRetriever(); retriever.setDataSource(url); ...
H5截取视频第一帧作为预览图片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>capture screen</title> </head> <body> <video id="video"
PHP windnows下调用ffmpeg截图视频的第一帧做封面图
第一步  官网下载ffmpeg的安装包 (网站:http://www.ffmpeg.org/download.html#build-windows) 下载完成以后解压压缩包        第一种      把ffmpeg.exe文件放到你要执行的的项目web根目录下即可(亲测有效),不然会输出    'ffmpeg' 不是内部或外部命令,也不       是可运行的程序或批处理文件  这样的...
angular2.x 截取视频第一帧代码
-
MediaElement 获取首帧图片
FileStream stream = File.Open("bear.png", FileMode.Create);RenderTargetBitmap bmp = new RenderTargetBitmap((int)this.video.ActualWidth,     (int)this.video.ActualHeight, 96, 96, PixelFormats.Pbgra32);...
windows下PHP获取视频第一帧图片作为背景图
我在网上找了很多这方面的资料,总结如下:一般用ffmpeg获取视频第一帧图片作为背景图; ffmpeg的下载链接  http://ffmpeg.org/download.html ; 下载好包,包里面在bin目录下找到ffmpeg.exe文件,将ffmpeg.exe文件随意放;但必须知道ffmpeg.exe文件绝对路径:网上有说安装ffmpeg或者放置在C:\Windows\System32;还有...
nodejs如何从上传的视频中截取一帧作为预览图片
客户有个上传视频的需求,上传的视频呢,需要能在线播放并且列表中必须出现类似优酷等视频首页上的那种缩略图,成品如下图所示: 当然了,上传视频的界面就不贴出来了,毕竟我们这篇文章的重点不在于如何上传,而在于如何用nodejs截取视频中的帧!~ 这里我们需要一个开源的第三方插件----大名鼎鼎的多媒体编解码框架ffmpeg,需要安装在服务器上由nodejs调用, 代码贴出如下: func
java获取视频信息,帧(封面图片)
ffmpeg的调用工具,获取视频信息,帧(封面图片)。代码已封装好,注释相信,直接调用
在iOS开发中,在视频初始状态时获取视频的第一帧图片
先获取视频的URL,然后初始化一个MPMoviePlayerController做工具,利用MPMoviePlayerController来拿图片,看具体代码如下: - (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
HTML5 单个或者多个Video标签视频加载第一帧方法(poster属性)
最近在做这个前端视频加载第一帧的功能,查了很多资料基本上有两种思路:一、canvas画图取base64格式编码设置poster属性的方法; 二、给定图片设置在视频上方,点击图片隐藏起来,视频追加播放事件。我就在此提供方法一所需要的代码,也是自己用到的,不足之处,还望指教。1、单个video标签<!DOCTYPE html> <html> <head> <meta charset="UTF-
Android 获取视频某一帧,并且设置为封面
最近要做一个为视频设置封面的功能,这里展示一下简单的demo。 demo效果 这里直接将选取的视频某一时间的bitmap显示在视频下方。上面是视频,下面是所获取那一帧的截图。 具体代码 这里的话主要是靠videoView来显示视频内容,seekBar来控制视频的进度,使用MediaMetadataRetriever来获取所选中进度的时间的视频画面。 布局代码 &amp;lt;LinearLayout x...
取视频的第一帧作为初始页面
NSString *url = [Utils applicationCachesDirectory:self.videourl];         url = [Utils applicationDocumentsDirectory:self.videourl];         NSURL *videoURL = [NSURL fileURLWithPath:url];         N
javacv实现上传视频后自动保存封面缩略图(视频第一帧)
首先,使用场景: 现在视频网站展示列表都是用img标签展示的,动图用的是gif,但是我们上传视频时并没有视屏封面,就这需要上传到服务器时自动成功封面并保存 JavaCV 是一款开源的视觉处理库,基于GPLv2协议,对各种常用计算机视觉库封装后的一组jar包,封装了OpenCV、libdc1394、OpenKinect、videoInput和ARToolKitPlus等计算机视觉编程人员常用库的...
ckplayer播放器解决MP4文件缓冲结束前无法播放的方法
最近给客户上传mp4的视频,发现不下载完成,不会播放,查了下,视频要等加载完才能播放,而不是边加载边播放这是因为视频的元数据信息不在第一帧所致。元数据是指保存视频属性的一组参数,比如视频的宽度,高度,时间长,总字节,关键帧等信息。因为网页上的视频播放器播放视频是以流的形式加载(即没办法直接加载视频结尾的数据,只能从前向后加载),所以播放器必需要读取到元数据信息才可以进行播放。 具体的解析办法可参考
Android获取视频文件某一帧并设置图片
在项目中,有时候需要抓取视频文件的某一帧图像做为预览图片,那到底应该怎么获取这个图片呢?
截取网络视频的第一帧并显示
原理:主要是 canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); 的运用,这个函数可以根据图片,视频和画布来绘制图片,详情可了解 http://www.w3school.com.cn/tags/canvas_drawimage.asp<%@page
关于视频不播放的时候画面显示他某一帧的画面
前言:我是在使用七牛云的时候遇到的这个问题,七牛的解决方案是:  &amp;lt;video  src=&quot;${fishDisease.video}&quot;  controls=&quot;&quot; x5-playsinline=&quot;&quot; playsinline=&quot;&quot; webkit-playsinline=&quot;&quot; poster=&quot;${fishDisease.video}?vframe/jpg/offset/6/w/1280
上传视频自动获取第一帧图片
上传视频可自动获取第一帧图片,真正实现了,还有些功能请高手完善下,比如超过1G以上的视频上传等等,现在只实现了2M大小的视频上传,其他功能没有完成。请高手完成后也共享下谢谢。
iOS 获取视频的缩略图(视频的第一帧)
首先我们要导入三个官方的库 #import &amp;lt;AVFoundation/AVAsset.h&amp;gt; #import &amp;lt;AVFoundation/AVAssetImageGenerator.h&amp;gt; #import &amp;lt;AVFoundation/AVTime.h&amp;gt;   导入这三个库就是获取的方法了,一中是本地的视频,另一种是网络视频   // 获取视频第一帧 ...
ImageView显示视频的第一帧图片&&VideoView视频播放
ImageView显示视频的第一帧图片&&VideoView视频播放我们在播放视频时,为了增强用户体验,在视频未播放时,需要显示视频的第一帧图片,增强用户体验。效果如图:在android中系统提供了一个类MediaMetadataRetriever,可以帮我们获取视频的第一帧数据,当然,其他帧图片也是可以获取的。下面来看具体代码:布局文件:<?xml version="1.0" encoding="
网页js获取视频帧图片
如何从视频中取出一个帧做为视频的封面呢?
ckplayerX取消右上角logo,中间logo/
取消右上角logo,ckplayer.js中的logo对象注释掉。中间logo,我没找到注释的方法,就将位置移动到页面外面,将loading对象中的 offsetX修改为-3000,这样就看不见了。...
JAVA获取视频播第一帧
java获取视频播第一帧 FFMPEG 功能很强大,做视频必备的软件。大家可通过 http://ffmpeg.org/ 了解。Windows版本的软件,可通过 http://ffmpeg.zeranoe.com/builds/ 下载。 因为有这个需求,通过 ffmpeg 获取视频第一帧图片 Google一把,就有了结果。 参考: 1、http://www.codereye
关于使用CKplayer播放m3u8视频出现没有视频的问题分析
由于项目的需求,需要在网页上使用播放器播放HLS m3u8的视频。看到网上关于CKplayer的介绍,使用了这个开源的播放器。 从CKplayer的官网找到了m3u8的插件。可是使用之后出现了问题。 此时视频已经开始播放,通过开发者工具查看 、 可以清楚看到切片已经开始下载。 使用vlc播放该视频可以正常播放。考虑可能是推流问题,从网络上找了开放的m3u8地址,均可以正常播放
iOS开发之视频根据url获取第一帧图片,获取任一帧图片
+ (UIImage*) thumbnailImageForVideo:(NSURL *)videoURL atTime:(NSTimeInterval)time { AVURLAsset *asset = [[AVURLAsset alloc] initWithURL:videoURL options:nil]; NSParameterAssert(asset);
android中截取视频的第一帧图片
android截取视频第一帧 /** * Created by Administrator on 2016/9/9. */ public class CreateBitmap{ public static Bitmap createBitmapFromVideoPath(String url, int width, int height) { Bitmap bitma
海洋seacms中超酷ckplayer自动下一集代码。
海洋seacms中超酷ckplayer播放完成自动下一集代码,给不会修改的朋友~
iOS 获取视频第一帧图片
#import #import #import // 获取视频第一帧 - (UIImage*) getVideoPreViewImage:(NSURL *)path { AVURLAsset *asset = [[AVURLAsset alloc] initWithURL:path options:nil]; AVAssetImageGenerator *ass
Java获取视频第一帧做缩略图
Java使用FFmpeg获取视频的缩略图
ckplayer无法播放视频
需要官网下载转码工具 http://www.ckplayer.com/manualX/47.html cmd进入解压后的路径 cd ffmpeg/bin 测试d:/1.flv转成d:/1.mp4 同样,复制下面的命令,在命令窗口里点击鼠标右键选择粘贴 ffmpeg.exe -i &quot;d:/1.flv&quot; -y  -metadata title=&quot;这是视频标题&quot;  -metadata comm...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 ios开发视频封面 ios开发获取视频封面