如何在WP7 - Phonegap中播放嵌入式视频？ [英] How to play embedded video in WP7 - Phonegap?
问题描述
我需要在我的WP7 phonegap应用程序中播放嵌入的视频文件。文件（dizzy.mp4）位于www文件夹中以及以下布局
I need to play an embedded video file in my WP7 phonegap application. The file (dizzy.mp4) is located in the www folder along with the following layout
<!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>
如果第一个视频元素被点击，视频文件正从互联网下载，一切正常。但是，点击第二个（本地视频）后，只有一个带有打开...标签的视频播放器屏幕。这两个视频都是同一个视频文件。
If the first video element is clicked, the video file is being downloaded from the Internet and all is ok. But after clicking on the second (local video) just a video player screen with 'Opening...' label appears. Both videos are the same video file.
应用程序在模拟器和真实设备上运行（诺基亚Lumnia 710与WF7.5芒果），结果是一样。
The app was run both on an emulator and on a real device (Nokia Lumnia 710 with WF7.5 Mango), the result is the same.
我试图为视频文件设置不同的构建操作：内容，资源，嵌入式资源。
I tried to set different build actions to the video file: Content, Resource, Embedded Resource. It doesn't help.
如何使它工作？
更新： 此处介绍了一个类似的问题。是否是WP7错误？
UPDATE: A similar issue is described here. Is it a WP7 bug?
推荐答案
这里有一个解决方法。以下代码是实现视频播放功能的Phonegap命令。
Here is a workaround. The following code is a Phonegap command that implements video play back functionality.
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();
}
}
}
只有播放功能在这里，但它可以扩展到支持停止/暂停/关闭等。
There is only the Play function here, but it can be extended to support Stop/Pause/Close ect.
在客户端注册此命令：
<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'。
Pay attention to the path '/app/www/dizzy.mp4'.
这篇关于如何在WP7 - Phonegap中播放嵌入式视频？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
