The HTML5 Video and Audio Elements -...

User 2624719 Photo


Registered User
265 posts

Hi All
Just have to say How great it is not having to mess around with uploading video to youtube anymore this video element is worth its weight in gold simply brilliant !!!!! one major happy bunny :D

Regards Adrian
User 486215 Photo


Registered User
79 posts

Just have to say How great it is not having to mess around with uploading video to youtube anymore this video element is worth its weight in gold simply brilliant !!!!! one major happy bunny

You are right - this is a great addition!

But, you always had the ability to implement a Video Platform, with an <iframe> element, an HTML5 Video, with the <video> element, and an Audio (Player), with the <audio> element, using the HTML Element feature in BB, FF, RSD or SD - providing you had documentation on the new media elements added in HTML5.

Here's an example of a simple site with two video players using the new elements::
http://tjrdevelopment.org/TaleofTwoBrains

I made this for the enjoyment of a married couple I know. The "short" version was from an old video file I had captured some time ago. The video quality of this last one is and was somewhat poor compared to the "full" version from YouTube.

View the source of the pages to see what is generated for the new media elements.

Enjoy the videos too...
User 486215 Photo


Registered User
79 posts

But, you always had the ability to implement a Video Platform, with an <iframe> element, an HTML5 Video, with the <video> element, and an Audio (Player), with the <audio> element, using the HTML Element feature in BB, FF, RSD or SD - providing you had documentation on the new media elements added in HTML5.

I should have said something more about what you would have had to do if you had made your own versions of the HTML5 media elements.

You would need a container around the <iframe> so you could resize the frame for different breakpoints.

You would need to add CSS for the <video> and <audio> elements for the same reason.

Fortunately, CoffeeCup has done all this for you as part of the new media elements.

BTW, I changed the "short" version of the video to add more <source> file types and I added a poster for the video. So it will look a little different if you have looked at it from my previous post.

As stated, one of the videos has been updated at:
http://tjrdevelopment.org/TaleofTwoBrains


User 486215 Photo


Registered User
79 posts

Another simple example, this one using the HTML5 <audio> element:
http://tjrdevelopment.org/PoorMan'sJukebox

It is undesirable to have more than one player on a single page since the viewer could play several at the same time. To avoid this problem, each Audio player is in a frame, selected by one of the buttons above.

The individual player are on these pages: /song1.html, /song2.html, /song3.html, and /song4.html, if you want to view the HTML source.
User 2903050 Photo


Registered User
260 posts

Hi everyone, video working well on android and windows. I tried it on a iPhone 7 and nothing happens when I press play or full screen. What could be the issue? Do I need another format?
Regards Phil
User 486215 Photo


Registered User
79 posts

Phil,

If you are referring to the "short" version on the "Tale of Two Brains" site, it probably does need another video format (probably .mov).

I modified the generated HTML to conform to video formats generated by a third-party product when SD did not support them in the Video element. Sorry, I didn't test with an iPhone or an iPhone simulator.

Thanks for reporting the problem.

Don't have time to fix the problem now, but look for an updated post when I can make the fix.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

I tried Webmaster's PoorMan'sJukebox with my Iphone 6 (haven't got 7), and nothing wrong there. It didn't even stumble at the apostrophe in the web address. Let's have a link, Phil, so that we can check yours.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2903050 Photo


Registered User
260 posts

Apologies, I meant my own website.
Video is on the homepage.
phildias.com
Regards Phil
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Sorry. Tried it, it doesn't budge. Only a black screen. Could you open a new project, with only that video added, and make that project file available to us?

Edited: I didn't see Webmaster's post before I posted myself. He might be on about somerthing regarding that .mov file.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Check this with your Iphone: www.eikweb.no/video

BTW, I think you ought to have those other video formats too.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.