Bobchillingworth
Unregistered
So, I currently work for a (very) small non-profit. One of my recent responsibilities is to update our website. That's easy enough; we use Wix, and despite my complete lack of web development experience it's been fairly simple to learn. Wix is fairly limited in what it allows you to do however, and I'm at a complete loss when it comes to trying to insert HTML code for certain custom site elements, due to aforementioned lack of web design experience.
My present dilemma is as follows-
I want to include a silent autoplay video on a loop for the purposes of being a large page header. I used Chrome's "Inspect Element" functionality to grab the code from another site with something similar to what I'd like to create. Code is as follows below (with the source stripped out & replaced with "*source*"):
<html><head><meta name="viewport" content="width=device-width"></head><body><video controls="" autoplay="" loop=** name="media"><source src="*source*" type="video/webm"></video></body></html>
Pasting the unmodified code directly into Wix's HTML editor works without error- the other site's video plays, loops, etc. exactly how I'd want my own to. The issue is that I'm not sure how to get the video I'd like to use playing. I'm probably missing something obvious, but do I need to host it at some particular location? Replacing *source* with a link to the video on dropbox or OneDrive doesn't work. I thought the issue might be using /webm, but changing it to /mov to match my video's extension didn't resolve anything except make the video player look different. Right now all I'm getting is a blank, non-functional video player.
Thanks to anyone who can provide some guidance as to what the heck I'm doing wrong.
April 14th, 2015, 04:05
(This post was last modified: April 14th, 2015, 14:02 by Gustaran.)
Posts: 2,259
Threads: 58
Joined: Oct 2010
My approach would be to see if you can get the video to run locally, i.e. create an index.html file with your HTML code somewhere on your computer, put the video in the same folder and see if it runs. If it does it's just a path issue.
If not, you might need to take a look at embedding videos with HTML 5, from a short look at google it seems that not all browsers are supporting all codecs, but to be honest I am no expert on video formats/codecs myself:
http://www.encoding.com/html5/
Bobchillingworth
Unregistered
Thanks for the advice. I think the issue is an encoding problem, since it wouldn't run from the notepad file either.
Posts: 2,259
Threads: 58
Joined: Oct 2010
After doing a little more research I am somewhat unsure of the HTML 5 video tag support for *.mov files, the most often named filetypes seem to be ogg, mp4 and webm.
Since you already discovered a working example which used a webm file, it might be worth just trying to run your mov file through a free converter into webm format and see if that solves the problem.
Bobchillingworth
Unregistered
Thanks again.
Having played around with a converter and double-checked my encoding, I'm pretty certain the issue is with my hosting. It sadly appears that none of dropbox, OneDrive or Google Drive are viable. My office will have to look elsewhere.
Bobchillingworth
Unregistered
Yay, case closed- it was indeed the hosting I was trying to use. Found a temporary fix.
April 15th, 2015, 15:06
(This post was last modified: April 15th, 2015, 15:07 by Gustaran.)
Posts: 2,259
Threads: 58
Joined: Oct 2010
Good job! 
Could you give a hint how you fixed the problem? Sometimes I google a computer problem, find somebody else with the exact same issue and the thread ends with "Thanks guys, I fixed it" - and I am none the wiser. 
Bobchillingworth
Unregistered
Oh man, I hate that! :P
Uh, sure. It was pretty straightforward in my case. All of the code was fine. Like I said, the issue was where I was hosting the video clip, represented by "*source*" in the code posted above. In that space I previously had the public links to my video for dropbox, Google Drive and OneDrive; none of them gave me a functioning video player. What ended up working was uploading the video to Flowplayer.org, and then copying their embed code, and then from that copied the file name (which was somethng like "http://drive.flowplayer.org/225419/55461-[Bob's Movie Title].webm". The code immediately preceding it was "src=". I pasted the file name where "*source*" was in my video player code, and it worked- I got about 10 seconds of HD, looping, (mostly) muted video. The sound is an issue (it's not actually muted, just very quiet), but I think that has more to do with the program I used to isolate my video clip from a much larger presentation.
It's not a perfect set up, Flowplayer also has a (small) watermark which is kind of obnoxious and they aren't reliable for long-term use, but it serves my purpose for a proof-of-concept and establishes that the rest of the html code was fine.
Posts: 6,471
Threads: 63
Joined: Sep 2006
Just for my own knowledge, if I'm understanding this correctly you just need to host a pretty small video file that will load when your site does? Would that be more than a few tens of dollars per month through a standard hosting site? Do those guys not host video either?
Posts: 6,629
Threads: 131
Joined: Mar 2004
I would doubt it was really the hosting. More likely it was still a codec that browsers don't support for web video. Flowplayer probably re-encoded it into a web-compatible standard and that's what made it work.
The file extension like .mov is not the same thing as the codec. The file extension signifies the container. The codec is the video encoding format inside the container. http://www.encoding.com/blog/2014/01/13/...ontainers/
For web video, both the container and codec need to be supported by the browser. Gustaran's link in the second post in this thread is out of date, who cares about IE8's market share now. The standard container and codec supported by all modern browsers are MP4 and H.264 respectively. http://caniuse.com/#feat=mpeg4
If your original video file isn't MP4 and H.264, convert it to that and it should work with any kind of hosting. The tool to use for any sort of video processing is FFmpeg. It's a command-line program that will do anything with a video file, and with the right incantations, transcode it into any other container and codec. FFmpeg is natively Unix, but Windows builds are here.
These are the FFmpeg commands you'll be interested in:
Code: ffmpeg -i yourfile.mov
Will just print a bunch of information about the file, including container and codecs, so you can find out what you've already got.
Code: ffmpeg -i yourfile.mov -c:v libx264 -c:a copy output.mp4
Encode the video to H.264, keep the existing audio, and write to a new .mp4 container file. This is the simple version. There are about a billion optional parameters to libx264 to control things like the video bitrate and resolution.
Code: ffmpeg -i yourfile.mov -c:v libx264 -an output.mp4
Same as above, but remove the audio completely. -an means "audio none".
|
