android exoplayer设置为圆形

原创

mob649e8167c4a3 2024-09-16 03:58:53 ©著作权

文章标签 android xml ide 文章分类 Android 移动开发

©著作权归作者所有：来自51CTO博客作者mob649e8167c4a3的原创作品，请联系作者获取转载授权，否则将追究法律责任

Android ExoPlayer设置为圆形的实现

在安卓开发中，ExoPlayer是一款流行且强大的音频和视频播放库。许多开发者希望将视频展示为圆形，以便与应用的设计风格保持一致。本文将介绍如何使用ExoPlayer将视频设置为圆形以及相关的代码示例，通过理解这些代码，您将能够轻松实现类似效果。

ExoPlayer简介

ExoPlayer是Google推出的一个用于安卓应用的视频和音频播放库，相比于原生的MediaPlayer，ExoPlayer提供了更好的扩展性和灵活性。它支持各种媒体格式以及流媒体播放。

教程概要

我们将在此过程中创建一个Activity，并使用ExoPlayer播放视频。为了将视频呈现为圆形，我们将结合使用 ShapeableImageView 和 ExoPlayer.

创建项目

创建新项目: 使用Android Studio创建一个新的Android项目，选择Empty Activity模板。
添加依赖: 在build.gradle文件中添加ExoPlayer和Material Design库的依赖。

dependencies {
    implementation 'com.google.android.exoplayer:exoplayer:2.X.X' // 使用最新的版本
    implementation 'com.google.android.material:material:1.X.X' // 使用最新的版本
}

布局文件

在res/layout/activity_main.xml中，我们将定义一个布局，以便容纳ExoPlayer视频的圆形显示。

<RelativeLayout xmlns:android="
    xmlns:app="
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/video_view"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:shapeAppearanceOverlay="@style/ShapeAppearance.Apple"
        android:scaleType="centerCrop"
        android:layout_centerInParent="true"/>
    
</RelativeLayout>

添加样式

在res/values/styles.xml中，添加圆形样式。

<resources>
    <style name="ShapeAppearance.Apple">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">100%</item> <!-- 100%使其成为圆形 -->
    </style>
</resources>

Kotlin代码

然后在MainActivity.kt中实现ExoPlayer的逻辑。

import android.net.Uri
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.android.exoplayer2.ExoPlayer
import com.google.android.exoplayer2.MediaItem
import com.google.android.exoplayer2.ui.PlayerView
import com.google.android.material.imageview.ShapeableImageView

class MainActivity : AppCompatActivity() {
    private lateinit var player: ExoPlayer
    private lateinit var playerView: ShapeableImageView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        playerView = findViewById(R.id.video_view)

        // 初始化播放器
        player = ExoPlayer.Builder(this).build()
        
        // 用MediaItem加载视频
        val mediaItem: MediaItem = MediaItem.fromUri(Uri.parse("Your Video URL Here"))
        player.setMediaItem(mediaItem)
        
        // 准备并开始播放
        player.prepare()
        player.playWhenReady = true

        playerView.player = player
    }

    override fun onStop() {
        super.onStop()
        player.release() // 释放播放器资源
    }
}

类图

下面是代码中各个Component之间的关系：

classDiagram
    class MainActivity {
        +ExoPlayer player
        +ShapeableImageView playerView
        +onCreate()
        +onStop()
    }
    class ExoPlayer {
        +setMediaItem(mediaItem)
        +prepare()
        +playWhenReady
        +release()
    }
    class ShapeableImageView {
        +player
    }

    MainActivity --> ExoPlayer
    MainActivity --> ShapeableImageView

旅行图

接下来，我们可以用旅行图来描述应用的播放流程：

journey
    title ExoPlayer 播放流程
    section 初始化
      创建ExoPlayer: 5: 主播
      设置MediaItem: 4: 主播
    section 播放视频
      播放视频: 5: 主播
    section 释放资源
      释放播放器: 5: 主播