FFmpeg开发笔记（七十六）使用国产SDK的播放器wlmedia渲染视频
<span id="cke_bm_501S">《FFmpeg开发实战：从零基础到短视频上线》一书的“第 12 章 FFmpeg的移动开发”介绍了如何使用FFmpeg在手机上播放视频，基于FFmpeg的国产播放器开源框架也有很多了，前有哔哩哔哩的ijkplayer，后有小红书的RedPlayer，参见之前的文章《使用国产的ijkplayer播放器观看网络视频》和《使用国产的RedPlayer播放器观看网络视频》。</span><p><span id="cke_bm_501S"> 除此以外，wlmedia也是一款优秀的国产音视频播放SDK，该框架既支持Android系统，也支持鸿蒙系统，集成方便、使用简单，可谓异军突起。wlmedia基于FFmpeg、OpenSSL、SoundTouch、dav1d等第三方库，支持file、http、https、udp、rtmp、rtp、rtsp、byte[]等常见播放协议，也支持H.264、H.265、AV1等视频编码格式。<br>
wlmedia的源码托管地址为https://github.com/ywl5320/wlmedia，最新版本是2025年4月发布的wlmedia 4.2.0，可见该框架的源码更新十分及时。并且wlmedia的源码采用Java+XML编写，对于初学者而言非常友好，使用Android Studio Dolphin（小海豚版本）无需任何改动即可直接导入wlmedia的demo工程。<br>
在自己的App工程中集成wlmedia也很简单，只要执行下列几个步骤就行。</span></p>
<h1>一、导入wlmedia库</h1>
<p>如果已经事先导入wlmedia的库工程，则只需在build.gradle中添加下面一行即可引入wlmedia：</p>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-display-name="代码段" data-cke-filter="off" data-cke-widget-id="8" data-cke-widget-wrapper="1">
<pre class="cke_widget_element" data-cke-widget-data="%7B%22code%22%3A%22implementation%20project(path%3A%20'%3Awlmedia')%22%2C%22classes%22%3Anull%7D" data-cke-widget-keep-attr="0" data-cke-widget-upcasted="1" data-widget="codeSnippet"><code class="hljs">implementation project(path: ':wlmedia')</code></pre>
</div>
<p>如果不用库工程，也只要在build.gradle中添加下面一行即可引入wlmedia：</p>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-display-name="代码段" data-cke-filter="off" data-cke-widget-id="7" data-cke-widget-wrapper="1">
<pre class="cke_widget_element" data-cke-widget-data="%7B%22code%22%3A%22implementation%20'com.github.ywl5320%3Awlmedia%3A4.2.0'%22%2C%22classes%22%3Anull%7D" data-cke-widget-keep-attr="0" data-cke-widget-upcasted="1" data-widget="codeSnippet"><code class="hljs">implementation 'com.github.ywl5320:wlmedia:4.2.0'</code></pre>
</div>
<h1>二、引入wlmedia控件</h1>
<p>wlmedia提供了两种控件：WlSurfaceView和WlTextureView，其中WlSurfaceView用于一般的播放场景，布局代码示例如下：</p>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-display-name="代码段" data-cke-filter="off" data-cke-widget-id="6" data-cke-widget-wrapper="1">
<pre class="cke_widget_element" data-cke-widget-data="%7B%22code%22%3A%22%3CRelativeLayout%5Cn%C2%A0%20%C2%A0%20android%3Alayout_width%3D%5C%22wrap_content%5C%22%5Cn%C2%A0%20%C2%A0%20android%3Alayout_height%3D%5C%22260dp%5C%22%3E%5Cn%C2%A0%20%C2%A0%C2%A0%5Cn%C2%A0%20%C2%A0%20%3C--%20WlSurfaceView%20%E4%B8%80%E8%88%AC%E6%92%AD%E6%94%BE%E4%BD%BF%E7%94%A8%20--%3E%5Cn%C2%A0%20%C2%A0%20%3Ccom.ywl5320.wlmedia.widget.WlSurfaceView%5Cn%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20android%3Aid%3D%5C%22%40%2Bid%2Fwlsurfaceview%5C%22%5Cn%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20android%3Alayout_width%3D%5C%22match_parent%5C%22%5Cn%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20android%3Alayout_height%3D%5C%22match_parent%5C%22%20%2F%3E%5Cn%5Cn%C2%A0%20%C2%A0%20%3C--%20WlSurfaceView%20%E5%8A%A0%E8%BD%BD%E4%B8%AD%E7%9A%84%E5%8A%A8%E7%94%BB%20--%3E%5Cn%C2%A0%20%C2%A0%20%3Ccom.ywl5320.wlmedia.widget.WlCircleLoadView%5Cn%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20android%3Aid%3D%5C%22%40%2Bid%2Fwlcircleview%5C%22%5Cn%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20android%3Alayout_width%3D%5C%2250dp%5C%22%5Cn%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20android%3Alayout_height%3D%5C%2250dp%5C%22%5Cn%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20android%3Alayout_centerInParent%3D%5C%22true%5C%22%20%2F%3E%5Cn%5Cn%C2%A0%20%C2%A0%20%3C--%20WlSurfaceView%20%E6%92%AD%E6%94%BE%E6%8E%A7%E5%88%B6%E6%9D%A1%20--%3E%5Cn%C2%A0%20%C2%A0%20%3Ccom.ywl5320.wlmedia.widget.WlSeekBar%5Cn%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20android%3Aid%3D%5C%22%40%2Bid%2Fwlseekbar%5C%22%5Cn%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20android%3Alayout_width%3D%5C%22match_parent%5C%22%5Cn%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20android%3Alayout_height%3D%5C%2250dp%5C%22%5Cn%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20android%3Alayout_alignParentBottom%3D%5C%22true%5C%22%20%2F%3E%5Cn%3C%2FRelativeLayout%3E%22%2C%22classes%22%3Anull%7D" data-cke-widget-keep-attr="0" data-cke-widget-upcasted="1" data-widget="codeSnippet"><code class="hljs"><RelativeLayout
android:layout_width="wrap_content"
android:layout_height="260dp">
<-- WlSurfaceView 一般播放使用 -->
<com.ywl5320.wlmedia.widget.WlSurfaceView
android:id="@+id/wlsurfaceview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<-- WlSurfaceView 加载中的动画 -->
<com.ywl5320.wlmedia.widget.WlCircleLoadView
android:id="@+id/wlcircleview"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true" />
<-- WlSurfaceView 播放控制条 -->
<com.ywl5320.wlmedia.widget.WlSeekBar
android:id="@+id/wlseekbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true" />
</RelativeLayout></code></pre>
</div>
<p>而WlTextureView用于需要变更展示效果的场景，比如透明、移动、旋转等等，布局代码示例如下：</p>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-display-name="代码段" data-cke-filter="off" data-cke-widget-id="5" data-cke-widget-wrapper="1">
<pre class="cke_widget_element" data-cke-widget-data="%7B%22code%22%3A%22%3C--%20WlTextureView%20%E9%9C%80%E8%A6%81%E5%81%9A%E9%80%8F%E6%98%8E%E3%80%81%E7%A7%BB%E5%8A%A8%E3%80%81%E6%97%8B%E8%BD%AC%E7%AD%89%E4%BD%BF%E7%94%A8%20--%3E%5Cn%3Ccom.ywl5320.wlmedia.widget.WlTextureView%5Cn%C2%A0%20%C2%A0%20android%3Aid%3D%5C%22%40%2Bid%2Fwltextureview%5C%22%5Cn%C2%A0%20%C2%A0%20android%3Alayout_width%3D%5C%22match_parent%5C%22%5Cn%C2%A0%20%C2%A0%20android%3Alayout_height%3D%5C%22match_parent%5C%22%20%2F%3E%22%2C%22classes%22%3Anull%7D" data-cke-widget-keep-attr="0" data-cke-widget-upcasted="1" data-widget="codeSnippet"><code class="hljs"><-- WlTextureView 需要做透明、移动、旋转等使用 -->
<com.ywl5320.wlmedia.widget.WlTextureView
android:id="@+id/wltextureview"
android:layout_width="match_parent"
android:layout_height="match_parent" /></code></pre>
</div>
<h1>三、引入wlmedia播放器</h1>
<p>wlmedia提供的播放器叫做WlPlayer，它的用法很简单，只要以下几行代码就够了：</p>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-display-name="代码段" data-cke-filter="off" data-cke-widget-id="4" data-cke-widget-wrapper="1">
<pre class="cke_widget_element" data-cke-widget-data="%7B%22code%22%3A%22%2F%2F%20%E5%88%9B%E5%BB%BA%E6%92%AD%E6%94%BE%E5%99%A8WlPlayer%E7%9A%84%E5%AE%9E%E4%BE%8B%5CnWlPlayer%20wlPlayer%20%3D%20new%20WlPlayer()%3B%5Cn%2F%2F%20%E8%AE%BE%E7%BD%AE%E4%BD%BF%E7%94%A8OpenGL%E6%B8%B2%E6%9F%93%E7%9A%84%E6%9C%80%E5%A4%A7%E8%A7%86%E9%A2%91%E5%AE%BD%E9%AB%98%5CnwlPlayer.setRenderDefaultSize(3840%2C%202160)%3B%5Cn%2F%2F%20%E6%98%AF%E5%90%A6%E8%87%AA%E5%8A%A8%E6%92%AD%E6%94%BE%5CnwlPlayer.setAutoPlay(true)%3B%5Cn%2F%2F%20%E8%AE%BE%E7%BD%AE%E9%9F%B3%E9%87%8F%5CnwlPlayer.setVolume(100)%3B%5CnWlSurfaceView%20wlSurfaceView%20%3D%20findViewById(R.id.wlsurfaceview)%3B%5Cn%2F%2F%20%E8%AE%A9%E6%8E%A7%E4%BB%B6wlSurfaceView%E5%85%B3%E8%81%94%E6%92%AD%E6%94%BE%E5%99%A8WlPlayer%5CnwlSurfaceView.setWlPlayer(wlPlayer)%3B%22%2C%22classes%22%3Anull%7D" data-cke-widget-keep-attr="0" data-cke-widget-upcasted="1" data-widget="codeSnippet"><code class="hljs">// 创建播放器WlPlayer的实例
WlPlayer wlPlayer = new WlPlayer();
// 设置使用OpenGL渲染的最大视频宽高
wlPlayer.setRenderDefaultSize(3840, 2160);
// 是否自动播放
wlPlayer.setAutoPlay(true);
// 设置音量
wlPlayer.setVolume(100);
WlSurfaceView wlSurfaceView = findViewById(R.id.wlsurfaceview);
// 让控件wlSurfaceView关联播放器WlPlayer
wlSurfaceView.setWlPlayer(wlPlayer);</code></pre>
</div>
<p>按照上述几个步骤给App工程集成wlmedia后，编译运行wlmedia的demo工程，打开测试App如下图所示，可见wlmedia提供了多种演示功能。</p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-display-name="图像" data-cke-filter="off" data-cke-widget-id="3" data-cke-widget-wrapper="1"><span class="cke_reset cke_widget_drag_handler_container"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸"><span class="cke_widget_edit_container" title="编辑图片"><img src="https://img2024.cnblogs.com/blog/729938/202507/729938-20250713181134611-1916486830.jpg"></span></span></span></span></p>
<p>点击第一个“基础播放”按钮，打开普通播放页面如下图所示，可见wlmedia除了常规的控制操作之外，还提供了缩放、倍速、截图等其他功能。</p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-display-name="图像" data-cke-filter="off" data-cke-widget-id="2" data-cke-widget-wrapper="1"><span class="cke_reset cke_widget_drag_handler_container"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸"><span class="cke_widget_edit_container" title="编辑图片"><img src="https://img2024.cnblogs.com/blog/729938/202507/729938-20250713181155935-1763503477.jpg"></span></span></span></span></p>
<p>总结一下，wlmedia的确使用简单，播放功能也丰富，是个不错的国产播放器SDK。</p>
<p>更多详细的FFmpeg开发知识参见<span class="cke_widget_wrapper cke_widget_inline cke_widget_csdnlink cke_widget_selected" data-cke-display-name="a" data-cke-filter="off" data-cke-widget-id="1" data-cke-widget-wrapper="1">《FFmpeg开发实战：从零基础到短视频上线》一书。</span></p>
<span data-cke-copybin-start="1"><span data-cke-copybin-end="1"></span></span><br><br>
来源：https://www.cnblogs.com/aqi00/p/18982631
頁:
[1]