2012-02-17 20 views
2

WP7のphonegapアプリケーションで埋め込みビデオファイルを再生する必要があります。最初のvideo要素をクリックすると、ファイル(dizzy.mp4)は、以下のレイアウト埋め込みビデオをWP7で再生するには - Phonegap?

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <title>PhoneGap WP7</title> 
    <link rel="stylesheet" href="master.css" type="text/css" /> 
    <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script> 
    <script type="text/javascript" charset="utf-8" src="jquery-1.6.4.min.js"></script> 
</head> 
<body> 
    <video onclick="play()"> 
     <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4" /> 
    </video> 
    <video onclick="play()"> 
     <source src="./dizzy.mp4" type="video/mp4" /> 
    </video> 
</body> 
</html> 

と一緒にwwwフォルダにある、ビデオファイルは、インターネットからダウンロードされており、すべてがOKです。しかし、2番目の(ローカルビデオ)をクリックすると、「オープニング...」というラベルが付いたビデオプレーヤー画面が表示されます。どちらのビデオも同じビデオファイルです。

このアプリは、エミュレータと実際のデバイス(WF7.5マンゴーのNokia Lumnia 710)の両方で実行されましたが、結果は同じです。

ビデオファイルに異なるビルドアクション、コンテンツ、リソース、組み込みリソースを設定しようとしました。それは助けにはならない。

どのように動作させるには?

更新:同様の問題がhereと記載されています。それはWP7のバグですか?

+0

100%WP7バグではありません。それはPhonegapかHTML5のバグです。 – MyKuLLSKI

答えて

3

これは回避策です。次のコードは、ビデオ再生機能を実装するPhonegapコマンドです。

using System; 
using System.IO; 
using System.IO.IsolatedStorage; 
using System.Runtime.Serialization; 
using System.Windows; 
using System.Windows.Controls; 
using Microsoft.Phone.Controls; 
using WP7GapClassLib.PhoneGap; 
using WP7GapClassLib.PhoneGap.Commands; 
using WP7GapClassLib.PhoneGap.JSON; 

namespace PhoneGap.Extension.Commands 
{ 

    /// <summary> 
    /// Implements video play back functionality. 
    /// </summary> 
    public class Video : BaseCommand 
    { 

     /// <summary> 
     /// Video player object 
     /// </summary> 
     private MediaElement _player; 

     [DataContract] 
     public class VideoOptions 
     { 
      /// <summary> 
      /// Path to video file 
      /// </summary> 
      [DataMember(Name = "src")] 
      public string Src { get; set; } 
     } 

     public void Play(string args) 
     { 
      VideoOptions options = JsonHelper.Deserialize<VideoOptions>(args); 

      Deployment.Current.Dispatcher.BeginInvoke(() => 
      { 
       try 
       { 
        _Play(options.Src); 

        DispatchCommandResult(new PluginResult(PluginResult.Status.OK)); 
       } 
       catch (Exception e) 
       { 
        DispatchCommandResult(new PluginResult(PluginResult.Status.ERROR, e.Message)); 
       } 
      }); 
     } 

     private void _Play(string filePath) 
     { 
      // this.player is a MediaElement, it must be added to the visual tree in order to play 
      PhoneApplicationFrame frame = Application.Current.RootVisual as PhoneApplicationFrame; 
      if (frame != null) 
      { 
       PhoneApplicationPage page = frame.Content as PhoneApplicationPage; 
       if (page != null) 
       { 
        Grid grid = page.FindName("LayoutRoot") as Grid; 
        if (grid != null && _player == null) 
        { 
         _player = new MediaElement(); 
         grid.Children.Add(this._player); 
         _player.Visibility = Visibility.Visible; 
        } 
       } 
      } 

      Uri uri = new Uri(filePath, UriKind.RelativeOrAbsolute); 
      if (uri.IsAbsoluteUri) 
      { 
       _player.Source = uri; 
      } 
      else 
      { 
       using (IsolatedStorageFile isoFile = IsolatedStorageFile.GetUserStoreForApplication()) 
       { 
        if (isoFile.FileExists(filePath)) 
        { 
         using (
          IsolatedStorageFileStream stream = new IsolatedStorageFileStream(filePath, FileMode.Open, 
                          isoFile)) 
         { 
          _player.SetSource(stream); 
         } 
        } 
        else 
        { 
         throw new ArgumentException("Source doesn't exist"); 
        } 
       } 
      } 

      _player.Play(); 
     } 
    } 

} 

ここには再生機能のみがありますが、停止/一時停止/終了機能をサポートするように拡張することができます。

は、クライアント側でこのコマンドを登録するには:パス '/app/www/dizzy.mp4' へ

<a href="#" class="btn" onClick="playVideo('/app/www/dizzy.mp4');">Play</a> 

ご注意:

<script type="text/javascript"> 

    function playVideo(src) { 

     PhoneGap.exec(  //PhoneGap.exec = function(success, fail, service, action, args) 
      null, //success 
      null, //fail 
      "Video", //service 
      "Play", //action 
      {src: src} //args 
      ); 
    }; 
    </script> 

は、ファイルを再生するには。

+0

Andrei Schneiderさん、あなたの回避策に質問があります。あなたはどこでビデオを保存しますか?隔離されたストレージにコピーしますか?または、あなたのアプリのwwwフォルダに動画がありますか?プロジェクトにプラグインをどのくらい正確に実装していますか?ビデオにアプリケーションを保存してコードを使用していますが、phonegap.exec(...)を呼び出すとコードが失敗します。あなたが質問に答えることができれば素晴らしいだろう!前もって感謝します。 – DrLudwig3

+0

Hey DrLudwig3、PhonegapプロジェクトのGapSourceDictionary.xmlファイルを見てください。それはファイルのリストを含んでいます。 PGViewクラスにはGapBrowser_Loadedメソッドがあります。このメソッドの内部では、GapSourceDictionary.xmlが読み込まれ、解析されます。ファイルはIsolated Storageにロードされます。 –

+0

ご希望の場合は、メールをお送りください。私は次の12時間の私のテストプロジェクトのソースコードをお送りします。 –

2

私は以下のようにPhoneGapのとAndroidプラットフォーム上でプレイ音楽の機能を実装して、私のコードのスナップショット: HTMLコードを:

<a href="#" class="btn large" onclick="playAudio('/android_asset/www/music/noya_wyt.mp3');">Play Audio</a> 

のJavaScriptコード:

function playAudio(src) { 
     // Create Media object from src 
     my_media = new Media(src, onSuccess, onError); 

     // Play audio 
     my_media.play(); 
} 

そして、私はあなたができると思いますビデオの「src」パスを変更して、もう一度やり直してください。アプリがまだ動作しない場合は、実装のためにphonegapメディアAPIを呼び出そうとすることができます。

+0

ありがとう@キッドY、私は回避策を作成するためのアイデアを使用しました。 –

関連する問題