如何在WP7中播放嵌入式視頻 - Phonegap？

我需要在WP7 phonegap應用程序中播放嵌入式視頻文件。該文件（dizzy.mp4）位於www文件夾與以下佈局如何在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>

如果點擊第一視頻元素，該視頻文件從互聯網上下載，一切都OK一起。但是在點擊第二個（本地視頻）後，只有帶有'Opening ...'標籤的視頻播放器屏幕出現。這兩個視頻都是相同的視頻文件。

該應用程序在模擬器和真實設備（帶有WF7.5芒果的諾基亞Lumnia 710）上運行，結果是相同的。

我試着爲視頻文件設置不同的構建動作：內容，資源，嵌入式資源。它沒有幫助。

如何使它工作？

更新：類似的問題描述爲here。這是一個WP7的錯誤？

來源

2012-02-17 Andrei Schneider

100％不是WP7的錯誤。它是一個Phonegap甚至是HTML5的錯誤。 – MyKuLLSKI 2012-02-20 19:23:18

這是一種解決方法。以下代碼是實現視頻回放功能的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(); 
     } 
    } 

}

這裏只有播放功能，但它可以擴展爲支持停止/暫停/關閉等。

要在客戶端註冊這個命令：

<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>

要播放的文件：對路徑 '/app/www/dizzy.mp4'

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

留意。

來源

2012-02-21 15:02:24

嘿安德烈施耐德，我有一個問題，你的解決方法。你在哪裏保存視頻？您是否將其複製到獨立的存儲中？或者是您應用的www文件夾中的視頻？你究竟如何實現你的插件到項目中？我已經將視頻保存在應用程序中並使用您的代碼，但在調用phonegap.exec（...）時代碼失敗。如果你能回答這些問題，那將是非常棒的！提前致謝。 – DrLudwig3 2012-03-05 15:52:32

嘿DrLudwig3，看看Phonegap項目中的GapSourceDictionary.xml文件。它包含一個文件列表。 PGView類中有一個GapBrowser_Loaded方法。在這個方法內部，GapSourceDictionary.xml被加載，解析。這些文件被加載到獨立存儲中。 – 2012-03-05 21:52:28

如果你願意，給我發電子郵件。我會在接下來的12個小時內向您發送我的測試項目的源代碼。 – 2012-03-05 21:55:07

我實現了播放音樂的功能，在Android平臺的PhoneGap，和我的代碼快照如下： 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進行實施。

來源

2012-02-21 02:35:46

謝謝@Kidd Y，我用你的想法來創建一個解決方法。 – 2012-02-21 15:04:19

如何在WP7中播放嵌入式視頻 - Phonegap？

回答

相關問題