HTML5 Video Tag - Post ID 296297

User 2997969 Photo


Registered User
24 posts

Hi.

I'm trying to include a page that will play videos. I have a rough draft page that has a Jumbotron and a Menu Bar (I'm using Bootstrap 4) and, as a first step toward including video, I added the following:

<h3>Video Element</h3>
<video width="320" height="240" controls>
source src="videos/apr-2-01.mp4" type="video/mp4"
some text
</video>

This doesn't work. In my F11 preview window I get a rough video player image with "unknown error" message. I have used the video tag successfully before but now I can't get it to work.

I plan on using this as a starting point to build video capability but I can't get past this first step. I know it's not the fault of the html editor, but I thought maybe some of the more experienced html5 coders could help me figure out why it's not working.

A corollary question: Anybody know of a good, simple template for including a video gallery in a web page? Doesn't have to be Bootstrap.

Thank you,
Robert
Attachments:
User 2699991 Photo


Registered User
4,797 posts
Online Now

how about putting those brakety things in

<video>
<h3> BLAHBLAH BLAh</>
<video width="320" height="240" controls/>
<source src="videos/apr-2-01.mp4" type="video/mp4"/>

</video>
or some such thing
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2997969 Photo


Registered User
24 posts

Thank you Wayan,

I put the brackets in:

<h3>Video Element</h3>
<video width="320" height="240" controls>
<source src="videos/apr-2-01.mp4" type="video/mp4">
some text
</video>

It still doesn't work though. A rough video player with no controls, except for the play icon, shows up but an error message "aborted" is there. I get no response when I click on the play icon.

Do I need the backslash before the right hand bracket? The example I looked at on W3Schools doesn't use the backslash, other than to close out the video tag at the end.

Thanks,
Robert
User 122279 Photo


Senior Advisor
14,450 posts

Hi, I have a working video made with HTML5 video in the HTML Editor.
https://mock-up.coffeecup.com/html-comps/video.html
I'd say don't add the dimensions into the video HTML, use css instead.
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 2997969 Photo


Registered User
24 posts

Inger,

Thanks. I will take a look and try it. However, I'm wondering if the problem might be with the F11/F12 preview functions in the HTML editor. If I open the same file that fails in the F11/F12 preview using Chrome with the ctrl-O command, the video opens and plays fine and all the controls are there and they work. It looks like the only place it doesn't work is using the html editor and F11/F12 previews.

Anybody else have this experience? I've become comfortable using the CC HTML editor and rely heavily on F11/F12 preview. If that's not a reliable indicator of web behavior I will have to change my design approach. I don't want to do that.

Thanks,
Robert
User 122279 Photo


Senior Advisor
14,450 posts

It has absolutely EVERYTHING to do with the F11/F12 preview. That preview uses IE11 at best, and IE11 is not compatible with HTML5.
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 2997969 Photo


Registered User
24 posts

Oh my. I didn’t know that. I guess I’ll have to use another way (other than F11/F12) to verify my progress. It’s seems a strange choice for a verification tool.

Thank you for helping me. I was going crazy trying to figure out what I was doing wrong.

Robert
User 122279 Photo


Senior Advisor
14,450 posts

You can add all your other, modern, browsers to the Editor in the Tools- Preferences - Browser preview. You can even make shortcuts to them on the toolbar.
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 2997969 Photo


Registered User
24 posts

Thank you Inger. Very helpful, as usual.

Robert

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.