如何在 WP7 - Phonegap 中播放嵌入视频？

发布于 2025-01-06 12:27:18 字数 1387 浏览 1 评论 0原文

我需要在 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 下载视频文件，一切正常。但是，单击第二个（本地视频）后，只会出现一个带有“正在打开...”标签的视频播放器屏幕。两个视频是同一个视频文件。

该应用程序在模拟器和真实设备（Nokia Lumnia 710 和 WF7.5 Mango）上运行，结果是相同的。

我尝试为视频文件设置不同的构建操作：内容、资源、嵌入资源。这没有帮助。

如何让它发挥作用？

更新：描述了类似的问题在这里。这是WP7的bug吗？

原文

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.

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.

How to make it work?

UPDATE: A similar issue is described here. Is it a WP7 bug?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

初见 2025-01-13 12:27: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>

播放文件：

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

注意路径“/app/www/dizzy.mp4”。

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.

To register this command on client side:

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

To play back the file:

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

Pay attention to the path '/app/www/dizzy.mp4'.

回复收藏 0 原文

温柔少女心 2025-01-13 12:27:18

我用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 media API来实现。

I implemented the functions of play music on Android platform with PhoneGap, and my code snapshot as below:
HTML code:

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

JavaScript code:

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

        // Play audio
        my_media.play();
 }

And I think you can change your video "src" path, and try again. If the app still doesn't work, you can try to call the phonegap media API for implementation.

回复收藏 0 原文

~没有更多了~