FC2ブログ

記事一覧

動画ファイルをアプリ内で再生する方法 | Xamarin.Forms


今回はXamarin.Formsで動画ファイルをアプリ内で再生する方法をご紹介いたします。ただし、Androidではアプリ内で再生するよりも、外部アプリで再生する方法の方がUIが整っている点において簡単に実装できます。詳しくは以前の記事「拡張子に対応するアプリでファイルを開く方法」にてご紹介しておりますので、ご参考ください。また、動画を撮影する方法についてはこちらをご覧ください。



iOS11
xamarin_videoview_02.png
Android7.0
xamarin_videoview_01.png



前提条件
・Windows10 Pro 64Bit
・Visual Studio 2015 Community Update3
・Xamarin 4.7.9.45 (NuGet Xamarin.Forms 2.4.0.282)
・macOS Sierra 10.12.6 / Xcode9 / Xamarin.iOS 11.0.0.0



1.PCLの記述方法

PCLプロジェクト内にDependencyServiceで呼び出すためのインターフェースを配置します。

IVideoService.cs
namespace AppName.Services
{
//DependencyServiceから利用する
public interface IVideoService
{
void Play(string filePath);
}
}



2.Androidの実装方法

Androidプロジェクト内に以下のクラスを配置します。

VideoService.cs
using System;
using Android.App;
using Android.Views;
using Android.Widget;
using Xamarin.Forms;
using AppName.Droid.Services;
using AppName.Services;
[assembly: Dependency(typeof(VideoService))]
namespace AppName.Droid.Services
{
public class VideoService: IVideoService
{
private static VideoView _view = null;
//再生
public void Play(string filePath)
{
if (String.IsNullOrEmpty(filePath))
{
return;
}

var context = Forms.Context;
if (_view == null)
{
_view = new VideoView(Forms.Context);
((Activity)context).AddContentView(_view, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent));
Android.Net.Uri uri = null;
if (!filePath.Contains("/"))
{
var packageName = context.PackageManager.GetPackageInfo(context.PackageName, 0).PackageName;
//var resourceId = Resource.Raw.test; /* /Resources/raw/test.mp4を指す */
var resourceId = (int)(typeof(Resource.Raw).GetField(System.IO.Path.GetFileNameWithoutExtension(filePath)).GetValue(null));

//リソースから取得する場合
uri = Android.Net.Uri.Parse(String.Format("android.resource://{0}/{1}",
packageName,
resourceId));
}
else
{
//ファイルパスから取得する場合
uri = Android.Net.Uri.Parse(filePath);
}
_view.SetVideoURI(uri);
}
_view.Start();

//再生できない場合
_view.Error += async (s, e) =>
{
await Task.Delay(3000);
this.DisposeObject();
};

//再生準備ができた場合
_view.Prepared += (s, e) =>
{
};

//再生が完了した場合
_view.Completion += (s, e) =>
{
this.DisposeObject();
};
}

private void DisposeObject()
{
((ViewGroup)(_view.Parent)).RemoveView(_view);
_view.Dispose();
_view = null;
}
}
}

※一時停止やボリューム・停止・再生などの操作ボタンは表示されません。
 必要な操作があればソースを追加で記述してください。
※再生できる拡張子には制限があるようです。
 再生可能拡張子:mp4
 再生不可拡張子:wmv, flv



3.iOSの実装方法

iOSプロジェクト内に以下のクラスを配置します。

VideoService.cs
using System;
using System.IO;
using Foundation;
using UIKit;
using AVFoundation;
using AVKit;
using CoreGraphics;
using Xamarin.Forms;
using AppName.iOS.Services;
using AppName.Services;
[assembly: Dependency(typeof(VideoService))]
namespace AppName.iOS.Services
{
public class VideoService : IVideoService
{
//再生
public void Play(string filePath)
{
if (String.IsNullOrEmpty(filePath))
{
return;
}

if (!filePath.Contains("/"))
{
//リソースから取得する場合
filePath = NSBundle.MainBundle.PathForResource(
Path.GetFileNameWithoutExtension(filePath),
Path.GetExtension(filePath));
}
var url = NSUrl.FromFilename(filePath);
//url = NSUrl.FromString("https://www.youtube.com/watch?v=O2NLJhHhA2g");
var avpvc = new VideoController(url);

var viewController = UIApplication.SharedApplication.KeyWindow.RootViewController;
while (viewController.PresentedViewController != null)
{
viewController = viewController.PresentedViewController;
}
viewController.PresentViewController(avpvc, true, () =>
{
avpvc.Play();
});
}
}

public class VideoController : UIViewController
{
private NSUrl _url = null;
private AVPlayer _avp = null;

public VideoController(NSUrl url) : base()
{
_url = url;
}

public override void ViewDidLoad()
{
base.ViewDidLoad();

var item = new AVPlayerItem(_url);
_avp = new AVPlayer(item);

var avpvc = new AVPlayerViewController();
avpvc.Player = _avp;
avpvc.View.Frame = new CGRect(0, 0, this.View.Bounds.Size.Width, this.View.Bounds.Size.Height);
this.AddChildViewController(avpvc);
this.View.AddSubview(avpvc.View);

//AVPlayerLayerでも動作しました。
//var playerLayer = AVPlayerLayer.FromPlayer(avp);
//playerLayer.Frame = View.Frame;
//View.Layer.AddSublayer(playerLayer);
}
public override bool ShouldAutorotateToInterfaceOrientation(UIInterfaceOrientation toInterfaceOrientation)
{
// Return true for supported orientations
return (toInterfaceOrientation != UIInterfaceOrientation.PortraitUpsideDown);
}

public void Play()
{
if (_avp != null)
{
_avp.Play();
}
}
}
}

※再生できる拡張子には制限があるようです。
再生可能拡張子:mp4
再生不可拡張子:wmv, flv



4.使用方法

PCLプロジェクトの中の任意のページに記述します。

TestPage.xaml.cs
using AppName.Services;
using Xamarin.Forms;
public class TestPage : ContentPage
{
void OnPlayClick(object sender, EventArgs e)
{
    DependencyService.Get<IVideoService>().Play("test.mp4");
}
}


Playの引数にはディレクトリを含めたファイルパスを渡します。
動画ファイルをリソースから取得する場合は、引数にファイル名のみを渡し、
画像ファイルと同様のフォルダに保存します。

Androidの場合
保存先:AppName.Droid\Resources\raw
ビルドアクション:AndroidResource

iOSの場合
保存先:AppName.iOS\Resources
ビルドアクション:BundleResource






最後までお読みいただきありがとうございます。
当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
https://itblogdsi.blog.fc2.com/blog-entry-81.html



関連記事

コメント

コメントの投稿

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。