Glide入门教程——6.播放Gif & 视频

作者: 签到钱就到 | 来源:发表于2016-05-16 19:45 被阅读6606次

Glide — 播放Gif & 视频

原文：Displaying Gifs & Videos
作者：Norman Peitek
翻译：Dexter0218

在前面的文章中，我们一起学习了从各种源加载图片，一起学习了如何改变图片大小和缩放等设置。这篇文章会展示给你一个Glide的特性：播放Gif和本地视频。

Glide 系列概览

播放 Gif动画

许多图片加载库能处理好图片的加载与显示，但很多并不支持Gif。如果你的app需要支持Gif，Glide的简单会让体验更惊艳。如果你想要播放Gif，你只要使用之前处理图片的类似的方法：

String gifUrl = "http://i.kinja-img.com/gawker-media/image/upload/s--B7tUiM5l--/gf2r69yorbdesguga10i.gif";

Glide  
    .with( context )
    .load( gifUrl )
    .into( imageViewGif );

上面的代码会在ImageView里显示Gif，并自动播放。Glide另外一个非常棒的功能是你仍然可以使用标准的调用去处理Gif。

Glide  
    .with( context )
    .load( gifUrl )
    .placeholder( R.drawable.cupcake )
    .error( R.drawable.full_cake )
    .into( imageViewGif );

Gif 检查

Glide接受Gif和图片作为load()的参数。上面代码中潜在的一个问题，如果提供的源不是Gif，可能是一个普通的图片。作为开发者，你当然希望那个URL是一个Gif，但Glide不能自动检测到底是不是，这样引入了一个额外的方法asGif()强迫生成一个Gif：
Glide
.with( context )
.load( gifUrl )
.asGif()
.error( R.drawable.full_cake )
.into( imageViewGif );

如果gifUrl是一个gif,没有异常发生。但如果gifUrl不是一个Gif，即使是一个完好的图片（非Gif），Glide也会加载失败。.error()回调方法会被调用，并加载错误占位图。

把Gif当作Bitmap播放

如果你的app需要显示一组网络URL，可能包括普通的图片或者Gif。在一些情况下，你可能并不在意是否要播放完整的Gif。如果你只是想要显示Gif的第一帧，当URl指向的的确是Gif，你可以调用asBitmap()将其作为常规图片显示。

Glide  
    .with( context )
    .load( gifUrl )
    .asBitmap()
    .into( imageViewGifAsBitmap );

这边介绍了用Glide所有的知识点去播放Gif，非常简单，试试吧！

注意事项 ——译者注##

实际中加载gif并没有上述的那么简单，可能会遇到很多问题：
比如加载慢，比如OOM。
1.git图片大小，图片格式是否正确，你可以查看下你需要加载的gif图片大小，需要多长时间。太大的图片，加载慢，又浪费流量，不利于用户体验。
2.网速是不是正常？从chrome里加载一下，看需要多长时间。
3.磁盘缓存策略问题。加载gif，就磁盘缓存还能设置全局缓存么？压缩调整gif大小，重新编码，是不是很消耗时间？官方给的方法是使用用：.diskCacheStrategy(DiskCacheStrategy.SOURCE)
4.在ListView等列表控件中滑动的时候，考虑添加 Glide.with(context).pause|resumeRequests() ，可以参考github上的开发者答复
5.开启Glide的相关log，查看异常原因，具体问题具体分析。不会开启的，请阅读异常: 调试和报错处理。
6.还不能解决，再访问https://github.com/bumptech/glide，看一下里面的issue，搜索一下跟你代码相关的关键字。

播放本地视频

介绍完Gif，下面介绍一下播放视频。Glide也能播放存储在手机上的本地视频。假设你能通过用户选择获取到视频文件的路径：

String filePath = "/storage/emulated/0/Pictures/example_video.mp4";

Glide  
    .with( context )
    .load( Uri.fromFile( new File( filePath ) ) )
    .into( imageViewGifAsBitmap );

重要提示：这里只对本地视频有效。对于并非存在本地的视频（如网络URL）并不支持！如果你想要从网络URL播放视频，参考VideoView。

展望

看完了这篇文章，你应当能够和处理图片一样，处理Gif和本地视频了。Glide可以让Gif的播放非常流畅和方便。后续的文章将要为你介绍Glide的缓存系统。

网友评论

25a336b14f3c:播放本地视频不成功的。

承香墨影:播放本地视频的方法是不成功的。只能显示视频文件的第一帧，类似于视频缩略图的效果。

25a336b14f3c:播放本地视频不成功的。

cde86b15d3d6:有解决方法吗

签到钱就到:非常感谢你能在提出自己的问题，我不是作者，只是翻译了一下，，我跟你一样也是一个初学者，目前还没有用过这个库，

，尽量给点意见和看法吧。
根据你的描述，我从网上找到http://blog.csdn.net/ltym2014/article/details/51351659 这个地址，里面有几个类似问题的链接。

1.git图片大小，网速，图片格式问题。你可以查看下你需要加载的gif图片大小，从chrome里加载一下，需要多长时间。
2.磁盘缓存策略问题。加载gif，就磁盘缓存还能设置全局缓存么？压调整gif大小，重新编码，是不是很消耗时间？官方给的方法是使用：.diskCacheStrategy(DiskCacheStrategy.SOURCE)
3.不同activity加载问题，建议打开log看日志，https://github.com/bumptech/glide/wiki/Debugging-and-Error-Handling#debugging-workflow

4.考虑在滑动的时候添加 Glide.with(context).pause|resumeRequests() ，可以参考https://github.com/TWiStErRob/glide-support/blob/a1572179430e837d8410cc9f915d7c4737e584dd/src/glide3/java/com/bumptech/glide/supportapp/github/_864_staggered_grid/PauseOnFling.java
5.还不能解决，再访问https://github.com/bumptech/glide/issues?utf8=%E2%9C%93&q=gif%20%20listview，看一下github上的issue，搜索一下关键字。

签到钱就到:@签到钱就到 @GoChat

萧喃:本人在recycleview中加载大量的gif图片，图片是加载出来了，但是显示成功之后滚动的时加载好的gif图就不动了，必须等上个几十秒有时甚至一分钟才可以。还有就本来加过缓存策略了，也可以在手机的dada/data/包名/中找到缓存的图片，可以在另个activity中再次重新根据url显示gif图片时应该加载很快的（因为在上一个activity中已经缓存好的），但是显示出来需要很长一段时间，感觉不是用的本地缓存，好像是有重新从网络获取了一次。
一下是我的代码
public void onBindViewHolder(MyGifRecyclerViewAdapter.MyHolder holder, final int position) {
GifsBean gifsBean = gifsBeens.get(position);
ViewGroup.LayoutParams layoutParams = holder.imageView.getLayoutParams();
layoutParams.height = Integer.parseInt(gifsBean.getFixed_height_height());
holder.imageView.setLayoutParams(layoutParams);
holder.imageView.setFocusable(false);
Glide.with(holder.imageView.getContext())
.load(gifsBean.getFixed_height_url())
// .centerCrop()
//.fitCenter()
.asGif()
.placeholder(gif_bg[random.nextInt(3)])
// .error(R.mipmap.ic_launcher)
// .skipMemoryCache(true)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.crossFade()
// .thumbnail(0.1f)
// .override(128,128)
.into(holder.imageView);
}

这个是在另一个activity中显示缓存好的的gif图片的url地址
代码如下
Glide.with(UserInfoActivity.this)
.load(photo)
// .centerCrop()
.transform(new GlideCircleTransform(UserInfoActivity.this))
.placeholder(R.mipmap.ic_launcher)
.crossFade()
.into(head_portrait);
加了缓存策略之后，在再次使用缓存的资源是不是根据url来获取的？
如果不是还请作者简单讲一些glide 缓存策略。谢谢

签到钱就到:@GoChat 2M还不算大？微信公众号允许上传的gif都不让超过1M，你这2M已经很大了。这样的apk做出来，没人敢用的啊。选小点的gif吧！
这个链接https://github.com/bumptech/glide/issues/513
官方的开发者的回复：Yep, that's a nice 1.2MB GIF file, which takes a while to download even on WiFi. I should have linked #348 too, which tells you why it doesn't work. Sam's comment is the key, the default networking and default timeout may not be suitable for your app, especially with a low-end network. Glide is not a networking library, it uses them through integration libraries. So in order to set bigger timeouts you will need to use some networking library. That's where #432 comes in and tells you what are the steps. (Not 423, I guess that's just a typo.)

萧喃:@签到钱就到一个gif图片2兆左右吧！不算大把！

签到钱就到:@GoChat 怀疑你的activity加载慢，是不是由于gif图片大小问题，虽然本地有缓存，glide去调整大小适配你activity里的控件？具体怎样个情况，还需要你去开启log查看了。

25a336b14f3c:播放本地视频不成功的。
承香墨影:播放本地视频的方法是不成功的。只能显示视频文件的第一帧，类似于视频缩略图的效果。
25a336b14f3c:播放本地视频不成功的。
cde86b15d3d6:有解决方法吗
签到钱就到:非常感谢你能在提出自己的问题，我不是作者，只是翻译了一下，，我跟你一样也是一个初学者，目前还没有用过这个库，，尽量给点意见和看法吧。
根据你的描述，我从网上找到http://blog.csdn.net/ltym2014/article/details/51351659 这个地址，里面有几个类似问题的链接。

1.git图片大小，网速，图片格式问题。你可以查看下你需要加载的gif图片大小，从chrome里加载一下，需要多长时间。
2.磁盘缓存策略问题。加载gif，就磁盘缓存还能设置全局缓存么？压调整gif大小，重新编码，是不是很消耗时间？官方给的方法是使用：.diskCacheStrategy(DiskCacheStrategy.SOURCE)
3.不同activity加载问题，建议打开log看日志，https://github.com/bumptech/glide/wiki/Debugging-and-Error-Handling#debugging-workflow

4.考虑在滑动的时候添加 Glide.with(context).pause|resumeRequests() ，可以参考https://github.com/TWiStErRob/glide-support/blob/a1572179430e837d8410cc9f915d7c4737e584dd/src/glide3/java/com/bumptech/glide/supportapp/github/_864_staggered_grid/PauseOnFling.java
5.还不能解决，再访问https://github.com/bumptech/glide/issues?utf8=%E2%9C%93&q=gif%20%20listview，看一下github上的issue，搜索一下关键字。
签到钱就到:@签到钱就到 @GoChat
萧喃:本人在recycleview中加载大量的gif图片，图片是加载出来了，但是显示成功之后滚动的时加载好的gif图就不动了，必须等上个几十秒有时甚至一分钟才可以。还有就本来加过缓存策略了，也可以在手机的dada/data/包名/中找到缓存的图片，可以在另个activity中再次重新根据url显示gif图片时应该加载很快的（因为在上一个activity中已经缓存好的），但是显示出来需要很长一段时间，感觉不是用的本地缓存，好像是有重新从网络获取了一次。
一下是我的代码
public void onBindViewHolder(MyGifRecyclerViewAdapter.MyHolder holder, final int position) {
GifsBean gifsBean = gifsBeens.get(position);
ViewGroup.LayoutParams layoutParams = holder.imageView.getLayoutParams();
layoutParams.height = Integer.parseInt(gifsBean.getFixed_height_height());
holder.imageView.setLayoutParams(layoutParams);
holder.imageView.setFocusable(false);
Glide.with(holder.imageView.getContext())
.load(gifsBean.getFixed_height_url())
// .centerCrop()
//.fitCenter()
.asGif()
.placeholder(gif_bg[random.nextInt(3)])
// .error(R.mipmap.ic_launcher)
// .skipMemoryCache(true)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.crossFade()
// .thumbnail(0.1f)
// .override(128,128)
.into(holder.imageView);
}

这个是在另一个activity中显示缓存好的的gif图片的url地址
代码如下
Glide.with(UserInfoActivity.this)
.load(photo)
// .centerCrop()
.transform(new GlideCircleTransform(UserInfoActivity.this))
.placeholder(R.mipmap.ic_launcher)
.crossFade()
.into(head_portrait);
加了缓存策略之后，在再次使用缓存的资源是不是根据url来获取的？
如果不是还请作者简单讲一些glide 缓存策略。谢谢
签到钱就到:@GoChat 2M还不算大？微信公众号允许上传的gif都不让超过1M，你这2M已经很大了。这样的apk做出来，没人敢用的啊。选小点的gif吧！
这个链接https://github.com/bumptech/glide/issues/513
官方的开发者的回复：Yep, that's a nice 1.2MB GIF file, which takes a while to download even on WiFi. I should have linked #348 too, which tells you why it doesn't work. Sam's comment is the key, the default networking and default timeout may not be suitable for your app, especially with a low-end network. Glide is not a networking library, it uses them through integration libraries. So in order to set bigger timeouts you will need to use some networking library. That's where #432 comes in and tells you what are the steps. (Not 423, I guess that's just a typo.)
萧喃:@签到钱就到一个gif图片2兆左右吧！不算大把！
签到钱就到:@GoChat 怀疑你的activity加载慢，是不是由于gif图片大小问题，虽然本地有缓存，glide去调整大小适配你activity里的控件？具体怎样个情况，还需要你去开启log查看了。

Glide入门教程——6.播放Gif & 视频

Glide — 播放Gif & 视频

Glide 系列概览

播放 Gif动画

Gif 检查

把Gif当作Bitmap播放

注意事项 ——译者注##

播放本地视频

展望

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

图片

收藏夹