Le Videofeed et le Carrousel associé sont également disponibles sous la forme d'un SDK Webviews pour intégration in-app Android et iOS
Ajouter la dépendance à votre projet avec l'une de ces solutions :
Vous pouvez intégrer VideoFeedSDK en tant que package Swift en ajoutant l'URL suivante du repository public dans Xcode :
https://github.com/digiteka/videofeed-ios-build.git
VideoFeedCarousselCollectionViewCell est une UICollectionViewCell personnalisée conçue pour afficher des éléments de flux vidéo dans une disposition de style carrousel.
Dans votre UIViewController ou UICollectionViewController, enregistrez la cellule avec votre `UICollectionView en utilisant l'extrait de code suivant :
collectionView.register(
VideoFeedCarousselCollectionViewCell.nib, // Load the nib file
forCellWithReuseIdentifier: "VideoFeedCarousselCollectionViewCell" // Assign a unique identifier
)Pour charger le carrousel, vous pouvez utiliser l'extrait de code suivant :
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
// [...]
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "VideoFeedCarousselCollectionViewCell", for: indexPath) as! VideoFeedCarousselCollectionViewCell
cell.load(with: mdtk, delegate: self)
return cell
// [...]
}VideoFeedCarrouselTableViewCell est une UITableViewCell personnalisée conçue pour afficher des éléments de flux vidéo dans une présentation de type liste.
Dans votre UIViewController ou UITableViewController, enregistrez la cellule avec votre UITableView à l'aide de l'extrait de code suivant :
tableView.register(
VideoFeedCarrouselTableViewCell.nib, // Load the nib file
forCellReuseIdentifier: "VideoFeedTableViewCell" // Assign a unique identifier
)Pour charger le carrousel, vous pouvez utiliser l'extrait de code suivant :
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// [...]
let cell = tableView.dequeueReusableCell(withIdentifier: "VideoFeedCarousselTableViewCell", for: indexPath) as! VideoFeedCarrouselTableViewCell
cell.load(with: mdtk, delegate: self)
return cell
// [...]
}VideoFeedCarrouselView est une UIView personnalisée conçue pour afficher des éléments de flux vidéo dans une disposition de type carrousel :
self.carrouselView = VideoFeedCarrouselView(frame: .zero)
if let carrouselView_ = carrouselView {
carrouselContainerview.addSubview(carrouselView_)
carrouselView_.translatesAutoresizingMaskIntoConstraints = false
carrouselContainerview.addConstraint(NSLayoutConstraint(item: carrouselView_, attribute: .leading, relatedBy: .equal, toItem: carrouselContainerview, attribute: .leading, multiplier: 1.0, constant: 0))
carrouselContainerview.addConstraint(NSLayoutConstraint(item: carrouselView_, attribute: .trailing, relatedBy: .equal, toItem: carrouselContainerview, attribute: .trailing, multiplier: 1.0, constant: 0))
carrouselContainerview.addConstraint(NSLayoutConstraint(item: carrouselView_, attribute: .top, relatedBy: .equal, toItem: carrouselContainerview, attribute: .top, multiplier: 1.0, constant: 0))
carrouselContainerview.addConstraint(NSLayoutConstraint(item: carrouselView_, attribute: .bottom, relatedBy: .equal, toItem: carrouselContainerview, attribute: .bottom, multiplier: 1.0, constant: 0))
}En option, un chemin d'AdUnit peut aussi être renseigné à l'aide du paramètre “adunitPath” au format networkCode/adBlockPath.
Pour charger le carrousel, vous pouvez utiliser l'extrait de code suivant :
self.carrouselView.load(with: mdtk, adunitPath: "networkCode/cheminDuBlocdAnnonce", delegate: self)Chacune des vues ci-dessus peut prendre un delegate pour gérer les interactions des utilisateurs et ouvrir le VideoFeedViewController selon vos besoins.
La classe delegate doit être conforme au protocole VideoFeedCarousselDelegate :
extension VideoFeedSampleCollectionViewController: VideoFeedCarousselDelegate {
func didTapOnItem(at videoId: String) {
self.navigationController?.pushViewController(VideoFeedViewController(videoId: videoId, mdtk: mdtk), animated: true)
}
}Si le paramètre delegate n'est pas défini, il présentera le VideoFeedViewController par lui-même.
Le VideoFeedSDK fournit un UIViewController que vous pouvez utiliser comme vous le souhaitez
Il peut être utilisé avec un videoId et un mdtk. Si aucun videoId n'est fourni, il affichera la première vidéo du flux.
let videoFeedViewController = VideoFeedViewController(videoId: videoId, mdtk: mdtk)
let videoFeedViewController = VideoFeedViewController(mdtk: mdtk)VideoFeedCarrouselViewSUI est une vue SwiftUI personnalisée conçue pour afficher des éléments de flux vidéo dans une disposition de style carrousel :
var body: some View {
VideoFeedCarrouselViewSUI(mdtk: mdtk)
.frame(maxWidth: .infinity)
.frame(height: 300)
VideoFeedCarrouselViewSUI(mdtk: mdtk) { videoId in
print("Selected videoId: \(videoId)")
}
.frame(maxWidth: .infinity)
.frame(height: 300)
}
VideoFeedViewSUI est une vue SwiftUI personnalisée conçue pour afficher des éléments de flux vidéo :
Elle peut être utilisée avec un videoId et un mdtk. Si aucun videoId n'est fourni, elle affichera la première vidéo du flux.
VideoFeedViewSUI(videoId: videoId, mdtk: mdtk)
VideoFeedViewSUI(mdtk: mdtk)Cette bibliothèque nécessite une cible de déploiement de iOS 12.0 ou supérieure.
Les composants SwiftUI sont disponibles à partir de iOS 13.0 ou supérieure.
Ajouter la dépendance à votre fichier build.gradle:
dependencies {
implementation("com.github.digiteka:videofeed-android:2.0.0")
} Et ajouter le token d'accès jitpack à votre projet dans votre fichier settings.gradle.kt :
dependencyResolutionManagement {
maven{
url = uri("https://jitpack.io")
credentials {
username = "your_access_key_here"
}
}
}Vous devez disposer d'une clé MDTK pour utiliser la librairie. En option, un chemin d'AdUnit peut aussi être renseigné au format /{networkCode}/{adBlockPath}.
Le carrousel d'aperçus est un composant d'affichage de vignettes de vidéos en mode horizontal. Il peut être intégré via un composant XML ou Compose.
<com.digiteka.videofeed.ui.carousel.VideoFeedCarousel
android:id="@+id/videoFeedCarousel"
android:layout_width="match_parent"
android:layout_height="@dimen/carousel_height" />Le composant doit ensuite être chargé via la méthode load() prenant en paramètre votre clé MDTK, un numéro de zone (optionnel) et le chemin d'AdUnit (optionnel) :
binding.videoFeedCarousel.load(mdtk, adUnitPath)Par défaut, le clic sur une vidéo ouvre le lecteur vidéo (VideoFeed) en plein écran dans une nouvelle activity. Il est possible de surcharger ce comportement en ajoutant un listener :
binding.videoFeedCarousel.onVideoClicked = { mdtk, videoId ->
// Handle video click
}VideoFeedCarousel(
modifier = Modifier
.fillMaxWidth()
.height(AppTheme.dimens.carouselHeight),
mdtk = mdtk,
adUnitPath = adUnitPath,
onVideoClicked = { mdtk, videoId ->
// Handle video click
}
)Le paramètre onVideoClicked est optionnel. S'il n'est pas renseigné, le clic sur une vidéo ouvrira le lecteur vidéo (VideoFeed) en plein écran dans une nouvelle activity.
Le VideoFeed est un lecteur vidéo vertical, avec navigation par scroll et swipe. Il peut être intégré via une activity ou un fragment.
startActivity(VideoFeedActivity.newInstance(context, mdtk, videoId, adUnitPath))La paramètre videoId est nullable. Si renseigné, le lecteur vidéo s'ouvrira directement sur la vidéo correspondante ; sinon, le lecteur s'ouvrira sur la première vidéo du feed.
VideoFeedFragment est un fragment AndroidX et peut être intégré comme tout autre fragment. Dans l'exemple suivant, il est inséré avec un FragmentContainerView dans un layout XML.
<androidx.fragment.app.FragmentContainerView
android:id="@+id/defaultUiActivityContainerView"
android:name="com.digiteka.videofeed.ui.VideoFeedFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" /> Il doit ensuite être initialisé avec la clé MDTK :
videoFeedFragment.load(mdtk, videoId, adUnitPath)La paramètre videoId est nullable. Si renseigné, le lecteur vidéo s'ouvrira directement sur la vidéo correspondante ; sinon, le lecteur s'ouvrira sur la première vidéo du feed.