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 / Xcode 9 / 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://itblog.dynaspo.com/blog-entry-81.html



関連記事

コメント

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

 入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


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

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Catalina 10.15 / Mojave 10.14 / High Sierra 10.13 / Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
【データベース】
Oracle 10g/9i
SQLServer 2016/2008R2/2005/2000
SQLAnywhere 16/11/8
【BI/レポートツール】
Cognos ReportNet (IBM)
Microsoft PowerBI
ActiveReport (GrapeCity)
CrystalReport
【OCX関連】
GrapeCity InputMan SPREAD MultiRow GridView
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS jQuery IIS6/7 apache2

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