I was asked to build a new website for a client and they want a “hero” banner video. I took their RAW video and converted and compressed it into three web usable files, mp4, webm, and ogg. Using Walter’s VideoBackground Action.
Having problems, one it won’t load in Safari because it is lacking the QT 7 plug-in!
In all the other web browsers Firefox, Chrome, Epic and Opera the video loads, however, its placement is above 200 or more pixels below the top, though I have the image frame/action at the very top. Also, the entire rest of the webpage is completely black or blocked out since I have HTML text below the video and it is not appearing, even in the source code! The page background color is set to white.
The text reads: Testing some text.
Also, I would like for the video to always start automatically, NOT show the controls and to loop.
I am wondering if this might be easier and better by properly embedding a YouTube video? And if so, how to do so with all the settings mentioned above, please?
And since I started this post my server at Hostgator has seemed to gone down!
Any and all help appreciated!
Thanks,
Robert
VideoBackground problems and ???
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I found an article that might help this situation, but I am not a code person whatsoever and therefore I do not know how to do what might be an easy task.
On Jun 6, 2019, at 3:08 AM, Robert Mitton email@hidden wrote:
Hello there, hope everyone is doing well.
I was asked to build a new website for a client and they want a “hero” banner video. I took their RAW video and converted and compressed it into three web usable files, mp4, webm, and ogg. Using Walter’s VideoBackground Action.
Having problems, one it won’t load in Safari because it is lacking the QT 7 plug-in!
Looking at the Action code, I can’t figure why that would be happening. The Action doesn’t use QuickTime, only native HTML5 video. How did you create/prepare/compress the video files for your background element?
In all the other web browsers Firefox, Chrome, Epic and Opera the video loads, however, its placement is above 200 or more pixels below the top, though I have the image frame/action at the very top. Also, the entire rest of the webpage is completely black or blocked out since I have HTML text below the video and it is not appearing, even in the source code! The page background color is set to white.
The text reads: Testing some text.
Also, I would like for the video to always start automatically, NOT show the controls and to loop.
Browsers have their own defaults in this area. In the Action, I set the audio to muted, and the autoplay and loop to on. I omit the controls parameter, which is how you set the controls to not appear according to the HTML5 spec. If the browser overrides that, they are out of spec. See more here: html - HTML5 Video // Completely Hide Controls - Stack Overflow
I am wondering if this might be easier and better by properly embedding a YouTube video? And if so, how to do so with all the settings mentioned above, please?
YouTube video will always show the YouTube controls and overlay. Do you really want some random ad for deodorant covering your site?
Walter
And since I started this post my server at Hostgator has seemed to gone down!
Looking at the Action code, I can’t figure why that would be happening. The Action doesn’t use QuickTime, only native HTML5 video. How did you create/prepare/compress the video files for your background element?
I’ve been using Miro Video Converter for taking RAW video and convert it into a much smaller mp4 file and also use it to convert to the other video format. I’ve never had a problem with it, but then again I have never used one of the files like this.
YouTube video will always show the YouTube controls and overlay. Do you really want some random ad for deodorant covering your site?
Walter
Yeah, I though maybe there was a way to do the YouTube thing without the ads, but no. They don’t want that. However, they decided to go with someone that builds WordPress “websites” and knows nothing about SEO other than Yoast.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
So I decided to try another compression and video editor. The RAW video file is 145 MB and with Cisdem Video Converter it is now down to 10.7 MB! And this file is behaving much better!
However, it is not doing what I was expecting because I have it inside of an HTML box that is 1200x671 and that is what I want to keep it at. I would like to keep it within a website that is set for 1200 pixels wide. With what I have going on now, how would I get that to happen, please?
And thank you Walter!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
And here is a curious thing. I can not get the watermark to show up and I have made several different watermarked videos now, I can not get this to show up on the internet via the website. However, the watermark shows up perfectly just going to were it sits on the server: https://lightningmobileelectric.com/Resources/GoPro-LME-exterior-lighting-Wal-Mart3.mp4
And idea what is happening here? It’s pretty odd to me.
Once again thanks to all!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Even more curious, the last video’s watermark was made by using the video editor Cisdem Video Converter’s text editor. So this attempt I actually imported a png into the video via the same video converter and still it does not show up on a webpage!
The two other formats (Ogg/Vorbis and WebM) are both 404. Further, the WebM video has a .mov file extension, which is wrong. It should have a .webm file extension.
The MP4 video is there, with the proper logo/text overlay, but it’s not being displayed by Safari. What I see at the page in question is only the static JPEG image. The video tag code is written out correctly, the CSS is correct to place it “behind” the page, but the video tag references missing files.
For a start, try making a new Freeway document, with a new Site Folder elsewhere on your Mac, and re-convert the video. See if you can get all four files to upload to your server: .mp4, .webm, .ogv, and .jpeg. Make sure they are all there where the HTML file says they should be.
Walter
On Jun 8, 2019, at 5:51 AM, Robert Mitton email@hidden wrote:
Even more curious, the last video’s watermark was made by using the video editor Cisdem Video Converter’s text editor. So this attempt I actually imported a png into the video via the same video converter and still it does not show up on a webpage!