I used <video src="Scrapbook.mpg" controls></video>. It says 'loading' and shows the play button but it never loads.
After I read a wikipedia article, I did a search on HTML5 Video and found several suggestions.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
This code seems to do everything (there was a demo on the W3 Schools page, but doesn't work in my program). The .mp4 file is in the Project files in the Project column, so I would expect it to open.
I also got some help from the Apple forum viz
Here's a page with sample code :
http://responsive.2kool4u.net/video/code/resp.html
And this is the page as text :
http://responsive.2kool4u.net/video/code/resp.txt
HTML5 & Video
Ronald McGuigan
Registered User
10 posts
paintbrush
Ambassador
3,816 posts
Ronald, you'll have better results if you start out with a valid Doctype so the browser knows how to display your content:
<!DOCTYPE html>
Coffee Cup has a 'book' (PDF) for 8 bucks that will get you up to speed:
Intro to HTML5 and CSS3 Learn how to use the latest web technologies: HTML5 and CSS3.
https://www.coffeecup.com/store/
Of course, there's a jillion resources online for HTML5 and CSS info.
You should also have a look at the CC Responsive Layout Maker:
http://www.coffeecup.com/responsive-layout-maker-pro/
Try it out for free
I see 3 videos and a slideshow on your page, and they all work (latest Firefox)
<!DOCTYPE html>
Coffee Cup has a 'book' (PDF) for 8 bucks that will get you up to speed:
Intro to HTML5 and CSS3 Learn how to use the latest web technologies: HTML5 and CSS3.
https://www.coffeecup.com/store/
Of course, there's a jillion resources online for HTML5 and CSS info.
You should also have a look at the CC Responsive Layout Maker:
http://www.coffeecup.com/responsive-layout-maker-pro/
Try it out for free
I see 3 videos and a slideshow on your page, and they all work (latest Firefox)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
Jo Rice
Senior Advisor
10,951 posts
Not only the HTML Declaration is missing, but the entire <head></head> section is missing which also needs to have information in it for telling the browser where to find things it needs. I would definitely get brushed up on HTML and CSS before moving forward with this setup.
Ronald McGuigan
Registered User
10 posts
I was intrigued by Paintbrush last comment re 3 videos and a slideshow. How did you get it to work? I have pasted the whole Index.html - tried to attach as a file but couldn't save with a suitable extension
<!--Generated by the CoffeeCup Web Editor - www.coffeecup.com
Description...
@created: 29/05/2014 - 13:12:05
@today: 29/05/2014
@project: No Project
@path: /Users/MacAir/Desktop/Website/Index.html
@author: Your name
@company: Your company
@Copyright: A copyright notice
@version: $Revision:$
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup Web Editor (www.coffeecup.com)">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Mango</title>
<style>
/* Adds 25 pixels of space between top of the browser window
and the content inside the page.
The graphic will tile seamlessly from left to right
covering the entire browser window */
html {
padding-top: 25px;
background-image: url(images/bg_page.png);
}
/* Creates a box for the page's content that is 80% of the browser window,
has a little space inside that moves text from the edge of the box(padding)
and centres the box on the page (margin),plus the box gets a
light blue background */
body {
width: 80%;
padding: 20px;
box-shadow: 10px 10px 10px rgba(0,0,0,.5);
margin: 0 auto;
background-color: #E1EDEB;
}
h1 {
color: #666666;
font-size: 3em;
font-family: 'Gravitas One', 'Arial Black', serif;
font-weight: normal;
margin: 0;
}
p {
font-family: "Palatino Linotype", Baskerville, serif;
color: #616161;
line-height: 150%;
margin-top: 10px;
margin-left: 60px;
}
h2 {
color: #B1967C;
font-family: 'Gravitas One', 'Arial Black', serif;
font-weight: normal;
font-size: 2.2em;
border-bottom: 2px white solid;
background: url(images/head-icon.png) no-repeat 10px 10px;
padding: 0 0 2px 60px;
margin: 0;
}
.intro {
color: #6A94CC;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
margin-left: 0;
margin-bottom: 25px;
}
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<h2 >Mango Reunion at Coffs Harbour, May 2014</h2>
</br>
</br>
</head>
<body>
<p>The following videos were created by Barry Jacka
and are an excellent montage of our lives from 1954 to 1956.</p>
</br></br>
<video width="320" height="240" controls>
<source src="Scrapbook.mp4" type="video/mp4">
<source src="Scrapbook.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
paintbrush
Ambassador
3,816 posts
Ronald, what browser are you using? I'm looking at your page in Firefox 29+
If it's an up to date browser and you don't see your video, have you tried refreshing the browser?
If your page is missing a DocType, some browsers will display it just fine anyway, while others will run in quirks mode and do the best they can to display the page. On top of that, browsers have varying levels of support for HTML5/CSS3 features; there are other things you could include within your code to ensure that things display and/or work as they should.
If instruction books aren't your thing, get to Googling
If it's an up to date browser and you don't see your video, have you tried refreshing the browser?
If your page is missing a DocType, some browsers will display it just fine anyway, while others will run in quirks mode and do the best they can to display the page. On top of that, browsers have varying levels of support for HTML5/CSS3 features; there are other things you could include within your code to ensure that things display and/or work as they should.
If instruction books aren't your thing, get to Googling
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
SadDuck
Ambassador
2,958 posts
This is what I see Ronald, using Google Chrome browser . . .appears to be responsive as it adjusts to page size.
http://gunsmoke.me/cloud/graphics/vids.jpg
http://gunsmoke.me/cloud/graphics/vids.jpg
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
-------------------------------------
https://sadduck.com
Ronald McGuigan
Registered User
10 posts
Hi all, I finally got my page up with help as usual from the CoffeeCup team - I put a capital in front of a file, dumbo!
I am using Safari, but the video above was somebody else's that I was looking at. Following Scott's advice I used Vimeo and the code from there worked. I still don't know why my code didn't viz<video width="320" height="240" controls>
<source src="Scrapbook.mp4" type="video/mp4">
<source src="Scrapbook.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
I am using Safari, but the video above was somebody else's that I was looking at. Following Scott's advice I used Vimeo and the code from there worked. I still don't know why my code didn't viz<video width="320" height="240" controls>
<source src="Scrapbook.mp4" type="video/mp4">
<source src="Scrapbook.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
SadDuck
Ambassador
2,958 posts
At least ya got it workin'! That's what counts. Good luck with your project. 
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
-------------------------------------
https://sadduck.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.
