如何在 WP7 - Phonegap 中播放嵌入的视频？
Posted
技术标签:
【中文标题】如何在 WP7 - Phonegap 中播放嵌入的视频？【英文标题】：How to play embedded video in WP7 - Phonegap? 【发布时间】：2012-03-08 17:17:29 【问题描述】：我需要在我的 WP7 phonegap 应用程序中播放嵌入的视频文件。该文件 (dizzy.mp4) 与以下布局一起位于 www 文件夹中
<!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>
如果点击第一个视频元素，则视频文件正在从 Internet 下载，一切正常。但是在单击第二个（本地视频）后，只会出现一个带有“正在打开...”标签的视频播放器屏幕。两个视频是同一个视频文件。
该应用程序在模拟器和真实设备上运行（诺基亚 Lumnia 710 和 WF7.5 Mango），结果是一样的。
我尝试为视频文件设置不同的构建操作：内容、资源、嵌入式资源。没用。
如何让它发挥作用？
更新：描述了一个类似的问题here。是 WP7 的错误吗？
【问题讨论】：
100% 不是 WP7 错误。它是一个 Phonegap 甚至 HTML5 错误。 【参考方案1】：这是一种解决方法。以下代码是实现视频播放功能的 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>
播放文件：
<a href="#" class="btn" onClick="playVideo('/app/www/dizzy.mp4');">Play</a>
注意路径'/app/www/dizzy.mp4'。
【讨论】：
嗨 Andrei Schneider，我对您的解决方法有疑问。你在哪里保存视频？您是否将它们复制到隔离存储中？还是您应用的 www 文件夹中的视频？你究竟是如何将你的插件实现到项目中的？我已将视频保存在应用程序中并使用您的代码，但是在调用 phonegap.exec(...) 时代码失败。如果你能回答问题，那就太棒了！提前致谢。 嘿 DrLudwig3，查看您的 Phonegap 项目中的 GapSourceDictionary.xml 文件。它包含一个文件列表。 PGView 类中有一个 GapBrowser_Loaded 方法。在这个方法中 GapSourceDictionary.xml 被加载、解析。并且文件被加载到独立存储中。 如果您愿意，请留下您的电子邮件。我将在接下来的 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”路径，然后重试。如果app还是不行，可以尝试调用phonegap media API实现。
【讨论】：
以上是关于如何在 WP7 - Phonegap 中播放嵌入的视频？的主要内容，如果未能解决你的问题，请参考以下文章
在 WP7 PhoneGap (Cordova) 应用程序 (v1.5) 中使用 $.getJSON