HTML5 Video Tag - Post ID 296273
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
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
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
<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://mawarputih.coffeecup.com/forms/contact-wayan/
A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
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://mawarputih.coffeecup.com/forms/contact-wayan/
A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
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
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
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.
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
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
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
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
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
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
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
Thank you for helping me. I was going crazy trying to figure out what I was doing wrong.
Robert
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
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Thank you Inger. Very helpful, as usual.
Robert
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.