How To Play Embedded Video In Wp7 - Phonegap?

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

Solution 1:

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;

namespacePhoneGap.Extension.Commands
{

    ///<summary>/// Implements video play back functionality.///</summary>publicclassVideo : BaseCommand
    {

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

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

        publicvoidPlay(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));
                }
            }); 
        }

        privatevoid _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
                    {
                        thrownew 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:

<scripttype="text/javascript">functionplayVideo(src) {

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

To play back the file:

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

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

Solution 2:

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

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

JavaScript code:

functionplayAudio(src) {
        // Create Media object from src
        my_media = newMedia(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.

Share