none
Building a Custom Video Player App with VS Community 2015

    Question

  • Learning VS | First Education Project Help Needed: 

    I've installed VS Community 2015 as my choice of IDE. I have a simple local video player education project in mind to learn with.

    I searched for sample projects and could not find one that will do what I would like the education app to do. I am hoping someone can suggest the appropriate tools to use or method. There are three content items: one mp4 and two png

    When the app is opened, the local 30 minute mp4 (downloaded as part of the app) should load while a logo is overlaid.

    There should be no user controls visible (the video content has user instructions).

    The logo is shown until the video is fully loaded then mp4 should be paused waiting user touch to begin playback. This step is done and seemed simple enough. Where I have difficulty is deciding the best method for providing additional user interaction during playback for a specific experience.

    The application code will have a series of specific times for user interaction during the playback. Here is how it should work:

    (Touching the screen will toggle between play and paused states of the full screen video.)

    At time 0, pause the video and wait for user touch.

    User touch begins playback. (If user touches before time 1 is reached, pause video and display pause poster until touched.)

    At time 1, pause the video and wait for user touch.

    User touches to begin playback. (If user touches before time 2 is reached, display pause poster until touched.)

    At time 2, pause the video and wait for user touch.

    User touches to begin playback. (If user touches before time 3 is reached, display pause poster until touched.)

    At time 3, pause the video and wait for user touch.

    User touches to begin playback. (If user touches before time 4 is reached, display pause poster until touched.)

    At time 4, pause the video and wait for user touch.

    User touches to begin playback. (If user touches before time 5 is reached, display pause poster until touched.)

    At time 5, pause the video and wait for user touch.

    User touches to begin playback. Ignore user interaction until playback is complete then display logo with video paused until touched to being a new playback. (This is the same as the user experience began.)


    I've considered writing a script to detect the 5 times while listening for the touch event to toggle but it seems like this should be something already available as a snippet sample. I've also considered breaking the video into parts then playing them consecutively which seems inefficient. I also thought perhaps the best approach was to use HTML5 video events.

    The goal is for the app to work on all large touch screen devices regardless of OS - hence the choice of HTML5. Any suggestions or links to snippets that can be adapted would be helpful! I would like to be able to re-use the code for educational apps.




    • Edited by Shelenn Thursday, July 14, 2016 6:26 AM
    Thursday, July 14, 2016 6:24 AM

Answers

  • Hi Shelenn,

    Please take a look at the following document about "Using JavaScript to control the HTML5 video player"

    https://msdn.microsoft.com/en-us/library/hh924823(v=vs.85).aspx

    In addition, since our forum is only discussing about Visual Studio Tools and settings in IDE. And for your question, I suggest you could post your thread to the corresponding development forum for better support.

    Thanks for your understanding.

    Best Regards,

    Lake Xiao

    Monday, July 25, 2016 1:57 AM
    Moderator

All replies

  • Hi Shelenn,

    I found a simple for your refernece:

    http://www.wpf-tutorial.com/audio-video/how-to-creating-a-complete-audio-video-player/

    Also you can have a look this vedio about Make a Media Player in Visual Studio 2013 :

    https://www.youtube.com/watch?v=r-NijQ79xFA

    Hope that could be helpful to you.

    Note: This response contains a reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you.

    Microsoft does not control these sites and has not tested any software or information found on these sites;

    Therefore, Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there.

    There are inherent dangers in the use of any software found on the Internet, and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet.

    Best Regards,

    Lake Xiao

    Friday, July 15, 2016 2:42 AM
    Moderator
  • Thank you. I will look at the links provided :)
    Wednesday, July 20, 2016 9:47 AM
  • I think they are helpful for folks who would like to make that type of media player. I was looking more for an HTML5 example that allowed me to add interactivity for educational purposes as described in my original post.
    Saturday, July 23, 2016 7:15 PM
  • Hi Shelenn,

    Please take a look at the following document about "Using JavaScript to control the HTML5 video player"

    https://msdn.microsoft.com/en-us/library/hh924823(v=vs.85).aspx

    In addition, since our forum is only discussing about Visual Studio Tools and settings in IDE. And for your question, I suggest you could post your thread to the corresponding development forum for better support.

    Thanks for your understanding.

    Best Regards,

    Lake Xiao

    Monday, July 25, 2016 1:57 AM
    Moderator