video player options

natehunter00 shared this question 7 years ago
Answered

I am mocking up a video module. Are there any video player widgets out there that are hiding where I can't find them? I would like to have all the functions of a "flash-esque" video player with a progress bar and time/countdown and full screen modes. Is that something that I am going to have to build myself or has some one already done that? I would hate to re-invent the wheel.

Comments (27)

photo
1

I'm afraid there isn't a widget like that already built anywhere. Sorry, but I think you will have to build it yourself.

photo
1

I am trying to do the same thing. Any ideas as to how you drop a local video into your mockup. I cannot use the you tube video player because I may not have internet available. Any pointers would be helpful.

photo
1

I think there is a trick but I haven't tried myself. If you drag a 'pdf' widget to your canvas, then go to properties and select another PDF. When the file explorer shows up write *.*. That will let you choose any kind of file, even a video. Select your video and it will be included in your prototype.

photo
1

When I am browsing for files from the pdf widget properties, I only have a pulldown menu to choose among pdf, xml, txt -- nowhere to enter a . to open up file types.

photo
1

Are you using Mac or Windows?

photo
1

Mac - ah, is that just the expected behavior on a mac? I"ll try downloading the windows version if it will help, though my main work machine is a mac laptop.

photo
1

Same on windows (prototyper 5) -- inputting a . doesn't open up the lock from the righthand menu that only allows those three file types. I can't force it to browse or accept videos.

photo
1

You have to write *.*

photo
1

ahh, j'arrive. I will try it when I'm back on the pc. Thank you!

photo
1

No, that has no effect. Only pdf files are visible (or no files, if there is no pdf in the folder). Is there some interim step I"m missing?

photo
1

You have to write *.* in 'Name' field. Like in the image 7ecf8a4470e8f38dfc2785d69cc50bf2

photo
1

Yes, that is exactly what I am doing, just like in your image. But I see that in your window above, you then have other file types show up like a doc; on my system (Prototyper 5, Windows7) no files become visible.

photo
1

Umm well, in that case maybe you can try a different way to add a video. You will need to create a folder with your video and a HTML file that runs the video. Then use the "HTML Website" widget and select that folder with the video and the html file.

photo
1

I would like to know how to add a video into my app not a youtube video /


This reply was created from a merged topic originally titled


<a class="notranslate" href="http://www.justinmind.com/community/topic/how_to_import_a_video_into_a_app/changes"; rel="nofollow" target="_blank">how to import a video into a app?</a>.

photo
1

We really need a solution where we can import a video by browsing to the location on our computer where the mp4 file sits. If this is not possible then justinmind will not be the tool for me, so I would like to know as soon as possible.

photo
1

You have two ways to do it. One is to download this zip file:


http://d2ld3he4yll0xl.cloudfront.net/...


Then extract it, inside you'll see a folder with two files. One is the video file, that you can change by your own video file, and the other is a tiny html code. If you open the index.html file you'll see a code like this:


<embed src="web_widgets.mp4" width="600" height="400"/>


You just need to change the video file name by yours and give it the right width and height (you can check on the internet how to configure video properties in html). Once you have done that, it's time to include that into your prototype.


Open Prototyper and drag the 'HTML website' widget to your prototype (is the last widget). Then, when asked, select the folder you extracted and the index.html in it. That way your video will be included in your prototype.


The other way to include a video is to use the HTML5 video tag. Drag the HTML widget to your prototype and write this code in the properties panel :


<html>


<head>


<title></title>


</head>


<body>


<video controls>


<source src="C:Sample_video.ogg" type='video/ogg; codecs="theora, vorbis"' />


</video>


</body>


</html>


You just need to define the path to your video and the type of the video.

photo
1

I am not a coder, so I don't know where and how to define the path and type of the video in your code above. Would you mind elaborating?

photo
1

Hi,


on this line you have to define the path and the type.


If you want to include some video from Youtube, here you can find how to do it.


http://justinmind.com/prototyper/lear...

photo
1

I have tried to embed YouTube videos with every single embed code they are providing, but I only end up with an empty white screen framed by scrollbars, so it's recognizing something but not displaying the video.


How do I know what my source and type of video is in this tag:


Do I have to upload my video to a server or can I create a local address that I could quote in this tag? If a local address is an option, please explain how to create it.

photo
1

Can you send me a screenshot of the embed code that you are including into the prototype?

photo
1

When I use the following code, all that comes up are the scrollbars around the white HTML box:


When I insert this other code (for the same YouTube video), it shows a mistake per the screenshot attached below:


---


Here is the step by step how I try to insert it:


1) I drag and drop the "HTML" widget from the "web" category into my mobile app prototype screen


2) I clear all the default HTML code that's already under the "ID" in "Properties"


3) Then I copy-past the code (one of the above listed) into the empty HTML field


Do I have to put something before or behind the code to make it work?


e129d46e684a4a584a4663ee7faa7e19


photo
1

Here are screenshots of the two different codes I used in the order of the videos above (the "iframe" one causes the error message "Page load failed [...]")


dcb4707008605ad5687ee4e2f7551285


photo
1

I see what's going wrong. You have to include http: before //www.youtube....


so, it should look like


4af78c85628dd5b65c3da1b822d416e9


By the way, it's a strange code, so I'm going to forward this "bug" to the development team.


Best regards

photo
1

It worked! Thank you so much!


For anyone who is reading here: Vimeo's embed code has the same issue. Just add the "http:" and it's good to go!


Thanks Albert!

photo
1

It took a few times back and forth, but the JustInMind employees here always followed up and eventually solved the problem. Thank you!! This is going to save me thousands of dollars in development...

photo
1

Is there a way to add a mp4 video file in a VP files ? I know about the HTML widget and linking the youtube iframe tags but that requires a internet connection. Looking into having a way to make it functional in a offline mode.

photo
1

Hi Carl,


You can build a simple website only containing the video and use the "HTML Website" widget. By doing it like this you will be able to play the video even if you are offline.


Best,


Marc