I am building a simple website for my company and need to embed a small video file into the first page. Being a beginner i had assumed i need it to be HTML5 to allow everyone to see the page with the video looping. However i am struggling to get Freeway to do this. Can anyone suggest a simple way to embed a video into a Freeway page so that whatever is used to view the site it works ok. I have the video available in all formats and Web optimised. Freeway allows me to simply drop the video right onto the page and it previews ok, but I suspect it wont work if i upload it to my ISP who hosts it.
Try my VideoJS Action, which will let you upload multiple versions of the video to your server, and provides multiple levels of fallback for all the various browsers and platforms.
If you want to use a third-party service, then I have another Action that uses SublimeVideo.
All of this is on ActionsForge.
As to the drag-and-drop method – that will also work, but only for those who have QuickTime installed. Far more people do than would say they did if you asked them – anyone who ever connects their iPod/Phone/Pad to their computer (Mac or PC) has it installed and working.
Walter
On Sep 20, 2012, at 1:16 PM, Dean Wilkin wrote:
I am building a simple website for my company and need to embed a small video file into the first page. Being a beginner i had assumed i need it to be HTML5 to allow everyone to see the page with the video looping. However i am struggling to get Freeway to do this. Can anyone suggest a simple way to embed a video into a Freeway page so that whatever is used to view the site it works ok. I have the video available in all formats and Web optimised. Freeway allows me to simply drop the video right onto the page and it previews ok, but I suspect it wont work if i upload it to my ISP who hosts it.
I hit a similar problem with the VideoJS action in that i can’t get it to show up in the action list. ( it is ticked in the edit actions dialog ) and from the VideoJS action download page i don’t know what is meant by " import a poster frame " in the brief instructions. i need some kind of tutorial to get me going.
Draw a Graphic Box on the page, and import a JPEG image into it to serve as the “poster frame” for the movie. This should be exactly the same dimensions as your movie in pixels. Then apply the Action to the graphic box. (You can only apply the Action to a photo, which is why it doesn’t show up in your list of Actions that you can add to the page. All Actions are contextual – they only appear in a list when the current cursor or selection makes sense with that Action.)
Walter
On Sep 20, 2012, at 3:44 PM, Dean Wilkin wrote:
Me again
I hit a similar problem with the VideoJS action in that i can’t get it to show up in the action list. ( it is ticked in the edit actions dialog ) and from the VideoJS action download page i don’t know what is meant by " import a poster frame " in the brief instructions. i need some kind of tutorial to get me going.
I had tried that ( by guessing as my HTML5 Conversion produced a lovely JPG picture which i assumed was the poster file/frame needed. I opened and sized a graphic item the same size as the video, added the jpg created by the HTML5 conversion software and thats as far as i get )
The issue i have is i cannot get the actions to show up when i have the relevant picture highlighted. It looks to me that something else needs selecting/ticking somewhere in the software to get these actions to show up and i cant find what it is.
I just tried it here, and had no issue. Be sure that the image box is selected (handles showing at its corners) and then look in Item / Actions for VideoJS. I just double-checked, and it works with a table-based layout and a CSS-based layout. (Just going through that dichotomy in another thread, thought I’d check).
Walter
On Sep 20, 2012, at 4:05 PM, Dean Wilkin wrote:
I had tried that ( by guessing as my HTML5 Conversion produced a lovely JPG picture which i assumed was the poster file/frame needed. I opened and sized a graphic item the same size as the video, added the jpg created by the HTML5 conversion software and thats as far as i get )
The issue i have is i cannot get the actions to show up when i have the relevant picture highlighted. It looks to me that something else needs selecting/ticking somewhere in the software to get these actions to show up and i cant find what it is.
Hi again
Thanks for the help.
Box was selected etc, and although i am new to Freeway/HTML, i am far from new to a computer. I am going to have to throw in the towel with Freeway Pro and buy an alternative that has better learning resource. I watched the three Freeway tutorial videos but need more to fix what i suspect is a small issue to do with settings.
Does anyone have an example of a webpage with a bit of video in it i could look at and tear apart. it has to be fully viewable in all browsers. ie windows and iOS etc. I tried the FLV action, did everything the instructions stated but the video doesnt play on ios devices. ( it does play if i put the non playing video file straight into iOS! So mobile safari is unhappy about something )
FLV == Flash, so it won’t play on most mobile devices. Ironically, the video compressed for FLV is standard MPEG-4 video, which will play on iOS and many other mobile OSs. It’s just the Flash “wrapper” that fails.
You should try the VideoJS Action or the SublimePlayer Action for two approaches to HTML5 video. Both of those will play perfectly on iOS, and will gracefully degrade – even to the point of injecting a Flash player for IE and older Firefoxes – on most platforms and browsers.
Walter
On Sep 24, 2012, at 8:19 AM, Dean Wilkin wrote:
Hi David
Thats an idea…
Does anyone have an example of a webpage with a bit of video in it i could look at and tear apart. it has to be fully viewable in all browsers. ie windows and iOS etc. I tried the FLV action, did everything the instructions stated but the video doesnt play on ios devices. ( it does play if i put the non playing video file straight into iOS! So mobile safari is unhappy about something )
I resorted to the FLV player as i could not get the VideoJS action to make itself available for adding. ( see prev posts and i spent many hours trying ) The FLV action is available to me in Freeway and works except the video on the published site wont play on iOS. i get the diagonal line across the play button.
I understand FLV is flash and wanted that for anyone visiting with older browsers. i assume not all browsers support HTML5.
Actually, all browsers support a system like VideoJS – because it starts off catering to mobile browsers, and then “falls back” to desktop browsers. I suspect that your issue with the Action has more to do with the setup of the page and your familiarity with Actions in Freeway than anything else. I’ve posted a sample document here:
Gather together the following files: a JPEG image that will serve as your “poster frame” for the video (it should be the same pixel dimensions as the video file) and a video file in MP4 format, compressed with H.264 video and AAC audio CODECs. You may also include an Ogg/Vorbis and or WebM compressed video, but you must have the H.264 at a minimum, since that’s what iOS and Android need.
Make a new page in Freeway, and make sure that the HTML Level picker in the Inspector (third tab from the left – the Output pane) is set to one of the Strict doctypes. (HTML4.01 Strict or XHTML 1.0 Strict)
Draw a graphic box on the page in Freeway. Import your poster frame image into it in the usual way.
While that box is selected in the design view (all corner handles showing) choose Item / Actions / VideoJS from the main menu.
Use the Action palette to select your H.264 video first, then optionally any other fallback formats.
I suspect that you have been trying to use this Action on a non-Strict page, and the instructions page lists that as a requirement – in pretty bold type! Actions are contextual – they only appear as a possible option when they can be “legally” applied.
Walter
On Sep 24, 2012, at 9:43 AM, Dean Wilkin wrote:
Hi Walter
I resorted to the FLV player as i could not get the VideoJS action to make itself available for adding. ( see prev posts and i spent many hours trying ) The FLV action is available to me in Freeway and works except the video on the published site wont play on iOS. i get the diagonal line across the play button.
I understand FLV is flash and wanted that for anyone visiting with older browsers. i assume not all browsers support HTML5.
Walter, thanks for the Action and the explicit directions. I just used it to share a company-internal video. Haven’t used Freeway much but this is exactly the sort of thing I hoped it would be handy for. FYI I didn’t know what to do with the zip/folder version of VideoJS but I got it off ActionsForge.
Hi Walter, is it not possible for Video.js, LinkToFile and LinkToPDF actions to have the same menu option that’s on audio.js - namely link to URL. I find this is much better than the [select file] button for two main reasons 1) When [select file] is chosen, it only uploads that file when you press cmd U to upload the site to the server - but this means it does it every time an edit is made to the page, and with large files, this is impractical.
2)It also means that a link can be made to a file that is already on the server (for whatever reason it’s already there) and that also allows different actions to access the same file instead of each one uploading it again.
That’s a great suggestion. It is completely possible, just a matter of doing it.
Walter
On Nov 16, 2013, at 12:21 PM, Alex Rollo wrote:
Hi Walter, is it not possible for Video.js, LinkToFile and LinkToPDF actions to have the same menu option that’s on audio.js - namely link to URL. I find this is much better than the [select file] button for two main reasons 1) When [select file] is chosen, it only uploads that file when you press cmd U to upload the site to the server - but this means it does it every time an edit is made to the page, and with large files, this is impractical.
2)It also means that a link can be made to a file that is already on the server (for whatever reason it’s already there) and that also allows different actions to access the same file instead of each one uploading it again.
On Nov 16, 2013, at 1:28 PM, Walter Lee Davis wrote:
That’s a great suggestion. It is completely possible, just a matter of doing it.
Walter
On Nov 16, 2013, at 12:21 PM, Alex Rollo wrote:
Hi Walter, is it not possible for Video.js, LinkToFile and LinkToPDF actions to have the same menu option that’s on audio.js - namely link to URL. I find this is much better than the [select file] button for two main reasons 1) When [select file] is chosen, it only uploads that file when you press cmd U to upload the site to the server - but this means it does it every time an edit is made to the page, and with large files, this is impractical.
2)It also means that a link can be made to a file that is already on the server (for whatever reason it’s already there) and that also allows different actions to access the same file instead of each one uploading it again.
My word Walter, I cannot thank you enough for this - you have no idea the trials I went through about two weeks ago, trying to get a video file to upload and play on my site. This addition to these brilliant actions has opened up a whole range of new possibilities for me.
I installed version 0.3 and within 5 minutes I had the video playing perfectly - it had taken me over two hours to upload, but I could not get anything else to connect to it.
Thank you again SO much, is there any way I can send you a donation?
My word Walter, I cannot thank you enough for this - you have no idea the trials I went through about two weeks ago, trying to get a video file to upload and play on my site. This addition to these brilliant actions has opened up a whole range of new possibilities for me.
I installed version 0.3 and within 5 minutes I had the video playing perfectly - it had taken me over two hours to upload, but I could not get anything else to connect to it.
Thank you again SO much, is there any way I can send you a donation?