ReelsVideoPlayer is a customizable Swift package for implementing an Instagram Reels-style video player in SwiftUI. It supports smooth infinite scrolling, video playback optimization, interactive progress sliders, and customizable overlays.
- 📹 Smooth Video Playback with efficient memory management
- 🔄 Infinite Scrolling for seamless content consumption
- 🎛 Customizable UI with flexible overlays and controls
- 🎚 Interactive Progress Slider to seek videos easily
- 🔇 Mute Button Support for toggling audio
- 🚀 Optimized Performance using preloading and buffering
- Open your Xcode project
- Go to File → Add Packages
- Enter the repository URL:
https://github.com/vandana-7span/ReelsVideoPlayer.git
- Select the latest version and click Add Package
import ReelsVideoPlayer
import SwiftUI
struct ContentView: View {
var reelData: [Reel] = []
init() {
reelData = MediaFileJson.map { mediaFile in
Reel(
url: mediaFile.url,
likeText: mediaFile.likeText,
commentText: mediaFile.commentText,
shareText: mediaFile.shareText,
profileImage: mediaFile.profileImage,
profileName: mediaFile.profileName,
captionText: mediaFile.captionText,
albumImage: mediaFile.albumImage
)
}
}
var body: some View {
VStack(spacing: 0) {
ZStack {
ReelsView(
reels: reelData,
batchSize: 20,
bufferRange: 3,
preferredForwardBufferDuration: 5.0,
overlayView: { showDefaultOverlay ? EmptyView() : CustomOverlayView() },
likeAction: { print("Liked") },
commentAction: { print("Commented") },
shareAction: { print("Shared") },
menuAction: { print("Menu opened") },
profileFollowAction: { print("Followed") },
profileImageAction: { print("Profile image clicked") },
profileNameAction: { print("Profile name clicked") },
albumImageAction: { print("Bottom action") },
loadingText: "Loading...",
showDefaultOverlay: true // Toggle between default and custom overlay
)
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
// Instagram-style bottom navigation bar
HStack(spacing: 0) {
Spacer()
Image(systemName: "house.fill").frame(maxWidth: .infinity)
Image(systemName: "magnifyingglass").frame(maxWidth: .infinity)
Image(systemName: "plus.app.fill").frame(maxWidth: .infinity)
Image(systemName: "heart.fill").frame(maxWidth: .infinity)
Image(systemName: "person.fill").frame(maxWidth: .infinity)
Spacer()
}
.frame(height: 50)
.background(Color.black)
.foregroundColor(.white)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.black)
}
}
You can provide a custom overlay by setting showDefaultOverlay = false
and passing a custom SwiftUI view, or use the default overlay by setting showDefaultOverlay = true
.
struct CustomOverlayView: View {
var body: some View {
VStack {
Spacer()
HStack {
VStack(alignment: .leading) {
Text("Custom Overlay Title")
.font(.title)
.bold()
.foregroundColor(.white)
Text("Custom overlay subtitle")
.font(.subheadline)
.foregroundColor(.white)
}
Spacer()
}
.padding()
.background(Color.black.opacity(0.7))
}
}
}
Then use it in ReelsView
:
ReelsView(
reels: reelData,
batchSize: 50,
bufferRange: 3,
preferredForwardBufferDuration: 5.0,
overlayView: { CustomOverlayView() }
)
Change preferredForwardBufferDuration
to control video preloading:
preferredForwardBufferDuration: 8.0 // Adjust buffer duration
✔ Try reducing preferredForwardBufferDuration
. ✔ Optimize preloading and memory usage.
This package is open-source and available under the MIT License.
Feel free to submit pull requests or open issues for feature requests or bug fixes!
For support or feature requests, reach out at [email protected].