Imbedding a Device Friendly Video

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
User avatar
ColinM
 
 
Posts: 706
Joined: Wed Feb 09, 2011 3:40 am
Location: Western Australia
Contact:

Imbedding a Device Friendly Video

Post by ColinM » Sun Jul 31, 2016 11:52 pm

First of all, great credit to dapson in THIS thread for steering me in the right direction - thanks heaps dapson.

What I haven't been able to get to work - The HTML5 Video I've found that this will work in everything except my HTC One XL mobile device -you can embed the video ok, but a black square with a "play triangle" will be displayed - not ideal.

What I find will work for mobile is using the YouTube object - the down side of course is that you will have to host the vid on YouTube - a very painful creation exercise!
Yours truly
Colin M
Western Australia
My Website

User avatar
Pablo
 
Posts: 21406
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Imbedding a Device Friendly Video

Post by Pablo » Mon Aug 01, 2016 6:56 am

HTML5 video will also work of Apple's IOS Safari browser and Mobile devices as long as you use the right format mp4.
http://www.w3schools.com/html/html5_video.asp

User avatar
ColinM
 
 
Posts: 706
Joined: Wed Feb 09, 2011 3:40 am
Location: Western Australia
Contact:

Re: Imbedding a Device Friendly Video

Post by ColinM » Mon Aug 01, 2016 7:50 am

Pablo wrote:HTML5 video will also work of Apple's IOS Safari browser and Mobile devices as long as you use the right format mp4.
http://www.w3schools.com/html/html5_video.asp
Thanks Pablo .... I thought I tried that and ended up with a "black square" without display of the initial frame picture - I've just checked this out - using the HTML5 object DOES work fine on IOS Safari - but I still get a "black square" on my HTC One XL Chrome Browser via the 320 viewport - HERE ?
Yours truly
Colin M
Western Australia
My Website

User avatar
ColinM
 
 
Posts: 706
Joined: Wed Feb 09, 2011 3:40 am
Location: Western Australia
Contact:

Re: Imbedding a Device Friendly Video

Post by ColinM » Mon Aug 01, 2016 7:52 am

Original post edited/corrected Pablo :D
Yours truly
Colin M
Western Australia
My Website

User avatar
Pablo
 
Posts: 21406
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Imbedding a Device Friendly Video

Post by Pablo » Mon Aug 01, 2016 8:11 am

In that case you may need to provide an alternative file format for the HTC.

User avatar
ColinM
 
 
Posts: 706
Joined: Wed Feb 09, 2011 3:40 am
Location: Western Australia
Contact:

Re: Imbedding a Device Friendly Video

Post by ColinM » Mon Aug 01, 2016 8:23 am

Pablo wrote:In that case you may need to provide an alternative file format for the HTC.
Ah - so the HTML5 mobile deployment issue is device specific (another edit to the initial post coming up :D )

Yes - so back to the deployment of the wmv format via the YouTube object - I've converted the MP4 to WMV for YouTube via Windows Movie Maker.

In any case, I'll have to use YouTube (or similar WB compatible streaming/host service) for another video as the required bandwidth/bit rate can't be accommodated by std web server hosting.

All very interesting stuff! :D

...and this means the HTML5 is not guaranteed to work on all mobile devices - I wonder if the YouTube falls into that category?
Yours truly
Colin M
Western Australia
My Website

User avatar
Pablo
 
Posts: 21406
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Imbedding a Device Friendly Video

Post by Pablo » Mon Aug 01, 2016 8:52 am

YouTube converts the video to multiple formats so it works on most devices.
WMV is not a web friendly format, MP4 is supported by most browsers.

User avatar
ColinM
 
 
Posts: 706
Joined: Wed Feb 09, 2011 3:40 am
Location: Western Australia
Contact:

Re: Imbedding a Device Friendly Video

Post by ColinM » Mon Aug 01, 2016 9:21 am

Pablo wrote:YouTube converts the video to multiple formats so it works on most devices.
WMV is not a web friendly format, MP4 is supported by most browsers.
Hmmm - Wow Pablo, is there anything you are NOT supper knowledgeable on? :lol: I tried MP4 and it was very distorted - the wmv seems to work HERE
Yours truly
Colin M
Western Australia
My Website

User avatar
Pablo
 
Posts: 21406
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Imbedding a Device Friendly Video

Post by Pablo » Mon Aug 01, 2016 9:54 am

WMV only works on windows, not on Mac, Linux, iOS.

See this table:
http://www.w3schools.com/html/html5_video.asp

User avatar
ColinM
 
 
Posts: 706
Joined: Wed Feb 09, 2011 3:40 am
Location: Western Australia
Contact:

Re: Imbedding a Device Friendly Video

Post by ColinM » Mon Aug 01, 2016 10:26 am

Pablo wrote:WMV only works on windows, not on Mac, Linux, iOS.

See this table:
http://www.w3schools.com/html/html5_video.asp
OK thanks Pablo - works fine on my Apple Ipad - via Safari?
Yours truly
Colin M
Western Australia
My Website

User avatar
Pablo
 
Posts: 21406
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Imbedding a Device Friendly Video

Post by Pablo » Mon Aug 01, 2016 11:23 am

Yes, YouTube also works on Safari because the video will be converted to mp4 by YouTube.

User avatar
ColinM
 
 
Posts: 706
Joined: Wed Feb 09, 2011 3:40 am
Location: Western Australia
Contact:

Re: Imbedding a Device Friendly Video

Post by ColinM » Mon Aug 01, 2016 1:05 pm

Pablo wrote:Yes, YouTube also works on Safari because the video will be converted to mp4 by YouTube.
Thanks Pablo - that's good to know 8)
Yours truly
Colin M
Western Australia
My Website

User avatar
protectourlands
 
 
Posts: 513
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Imbedding a Device Friendly Video

Post by protectourlands » Mon Aug 01, 2016 3:15 pm

Hi Colin

I remember way back when the introduction of the HTML5 video tag was supposed to make embedding videos easier. It did in that it standardized the video displayer for each browser by allowing the browser developers to build their own skin for video displays. Unfortunately the developers refuse to play together and support a format universally, mostly due to licensing fees. So we still have to jump through hoops to get videos to play on all operating systems and browsers by making available multiple formats of the video to accommodate all the possible scenarios. Two steps forward, one step back I guess.

User avatar
Rob
 
 
Posts: 164
Joined: Sun Jan 29, 2012 2:54 pm
Location: MN
Contact:

Re: Imbedding a Device Friendly Video

Post by Rob » Mon Aug 01, 2016 3:54 pm

If I may, I think another upside to YouTube, other than the obvious that the very heavy video is hosted on YouTube servers (reduces weight on your own server right?, is that YouTube can also be thought of as another social media channel for seo purposes. Pop in your keywords and it is possible for the video to be found thus perhaps driving traffic back to the website. Possibly? Just thinking out loud.
Small Business Web Design

User avatar
[RZ]
 
 
Posts: 2162
Joined: Tue Nov 04, 2008 12:08 pm

Re: Imbedding a Device Friendly Video

Post by [RZ] » Mon Aug 01, 2016 4:09 pm

@protectourlands
hi, i disagree with you where you said "two steps forward, one step back"
i would say "two steps forward, three steps back"... :)
there are a lot of differences (and call bugs to some of them) across browsers
not only about file formats and licenses, also about the <video> and <audio> implementations by themselves
was a pain (call this a lot of hours invested investigating these bugs/implementations) when i was dealing with these tags (btw i needed to make an extension even for my own use just to solve this "little" thing!)
the tag that should alleviate the hard work (remember? flash 3rd party resources, etc...), but for some unknown reason even a simple thing is complicated...

Post Reply