ShipMate Posted May 20, 2019 Share Posted May 20, 2019 (edited) Hi Gang I'm an older disabled WWII researcher looking for some help tweaking/adjusting the HTML for a Video Player. It seems I'm missing an image (or first few frames) so the player screen doesn't appear empty. Please understand I'm working with an older 'What You See Program' called 'Kompozer' - I realize there are numerous errors in the HTML (ignorance is bliss). I'm simply looking for information to address this particular problem only. My knowledge and capability is severely restricted by physical handicap. I designed an entire web page 10 years ago for the benefit of WWII veterans and their families. The Web Page has been working fine ever since (even with technical errors). I'm afraid I'll never be able to correct the entire web page to properly satisfy my friendly HTML experts. I'm not an HTML designer and only ask for help regarding this issue. Any help at all would be appreciated. BTW: You have a very nice school here (very nice indeed). Sample Problem < Sample Problem Thank You So Much - Web Page Edited May 20, 2019 by ShipMate Link to comment Share on other sites More sharing options...
Funce Posted May 21, 2019 Share Posted May 21, 2019 If you're alright with a little trial and error, you could try adding a timestamp onto the end of the URL, and add a preload attribute. <video width="500" controls="" preload="metadata"> <source src="Charley-Fox-Attack-2.mp4#t=0.1" type="video/mp4"> </video> 1 Link to comment Share on other sites More sharing options...
ShipMate Posted May 21, 2019 Author Share Posted May 21, 2019 (edited) Hi There Funce - Nice to see you! Yes sir I can sure experiment a little. I was referring to other suggestions from designers who sometimes indicate I scrap the whole site and start over. Sure can't do that ... Actually I was trying a tip from your online school regarding a 'Poster Attribute'. As I understand this arrangement, an image would be made available while the video is downloading, or until the user hits the play button. Sounds like a great idea if I could get it to work 😧 Is this approach possible? This is approx what I tried: <video controls poster="/images/w3html5.gif"> (data from your online school) <video controls poster="/images/CharleyFox.jpg"> (the image and data I added directly above the source video) More details of approx. what I tried: <div style="text-align: center;"><br> <video width="500" controls=""> <video controls poster="/images/CharleyFox.jpg"> <source src="Rommel-Attack.mp4" type="video/mp4"></source></video></div> I'm sure I got something wrong if not everything. 🤮 To my knowledge isn't it necessary to indicate the source of the image? I'm all eyes Funce - thank you for your patience trying to help ....🤗 Edited May 21, 2019 by ShipMate grammer Link to comment Share on other sites More sharing options...
Funce Posted May 21, 2019 Share Posted May 21, 2019 Hi ShipMate, Using the poster attribute does sound like the best fit, as you say. I see where your error is, you've got two video tags in that bit of code. You'll need to combine them. The source tag is also self-closing. <div style="text-align: center;"><br /> <video width="500" controls="" poster="/images/CharleyFox.jpg"> <source src="Rommel-Attack.mp4" type="video/mp4" /> </video> </div> What happens when you try the above code? Also, if you'd like to paste code on the forums, its best if you use the code blocks so that it doesn't get eaten by the formatter. 1 Link to comment Share on other sites More sharing options...
ShipMate Posted May 21, 2019 Author Share Posted May 21, 2019 Thank You Funce - Nice to see you again - I'll get on this ASAP and give it a try 😃 I'll also try your code duplication suggestion 😃 Link to comment Share on other sites More sharing options...
ShipMate Posted May 21, 2019 Author Share Posted May 21, 2019 (edited) Hi again Funce Here's the same sample with changes to the bottom player HTML (as you suggested): http://www.ww2survivorstories.com/test-video.html And here's a screen shot of the HTML change I made - I'm thinking something is missing/wrong with regard to the image or 'Poster Attribute' - I'm thinking the image itself should have been placed/inserted somewhere or identified as to its source? Funce: I'm joking but please don't look 'too hard' at the layout/software as you'll probably see inadequate tools to compose with (weakness of the program) 😥 Thank You .... Edited May 21, 2019 by ShipMate Inclusion of additional info Link to comment Share on other sites More sharing options...
ShipMate Posted May 21, 2019 Author Share Posted May 21, 2019 (edited) Thank You! Edited May 21, 2019 by ShipMate Link to comment Share on other sites More sharing options...
Funce Posted May 21, 2019 Share Posted May 21, 2019 Hi ShipMate, There isn't very many tools that can tell you what's wrong with an HTML document short of matching beginning and ending tags. Your source tag is self-terminating, you don't need </source> The only thing left to do is make sure there is CharleyFox.jpg inside your /images folder. 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted May 22, 2019 Share Posted May 22, 2019 Temporary add img tag with matching src to image, if you can see the image the path is correct, else correct the path to correct then use same correct path for video. Another problem is that video tag is for html5 doctype, you a using html 4 strict. 1 Link to comment Share on other sites More sharing options...
ShipMate Posted May 22, 2019 Author Share Posted May 22, 2019 Hi There dsonesuk! Thanx for the reply and the information - actually I finally managed to get results using the 'Poster Atttribute' - somehow I got the image folder screwed up ... However (as you hinted) all this while I still haven't been able to actually see the players - only text and other images in another test page. Sorry about my limited comprehension: Are you saying the 'Poster Atttribute' HTML I obtained from here: https://www.w3schools.com/tags/att_video_poster.asp is designed for a newer style HTML (html5 doctype)? Whereas the KompoZer application is using older style (html 4 strict)? Yes? Are you saying temporarily "add img tag with matching src to image" in order to see the layout? For the time being I'm estimating the location of the players ... Thank You Link to comment Share on other sites More sharing options...
ShipMate Posted May 22, 2019 Author Share Posted May 22, 2019 (edited) Well this was working - but not anymore 😟 http://www.ww2survivorstories.com/test-video.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>test-video</title> </head> <body style="color: rgb(0, 0, 0); background-color: white;" alink="#000099" link="#000099" vlink="#990099"> <div style="text-align: center;"><br> <br> <big><span style="font-family: Arial;"></span></big><br> <br> <br> <div style="text-align: center;"><br> <video width="500" controls="" poster="/images/CharleyFox-3.jpg"><source =""><source src="Charley-Fox-Attack-2.mp4" type="video/mp4"> </source></source></video></div> <br> <br> <div style="text-align: center;"><br> <video width="500" controls="" poster="/images/Pathe-Still.jpg"><source =""><source src="Rommel-Attack.mp4" type="video/mp4"> </source></source></video></div> </div> </body> </html> Edited May 22, 2019 by ShipMate missing data Link to comment Share on other sites More sharing options...
dsonesuk Posted May 22, 2019 Share Posted May 22, 2019 For a html4 strict document its not all that strict! Validate at https://validator.w3.org/nu/#textarea To see why. Use the same video ONLY in a html5 document, at the same file location as html4 document and compare the result. It will save time trying to get to work in html4 document when it being html4 IS the problem. 1 Link to comment Share on other sites More sharing options...
ShipMate Posted May 22, 2019 Author Share Posted May 22, 2019 (edited) Thanks for all your help! I afraid the program I'm working with makes things difficult to make any changes so I'll have to be satisfied with this .... (I can't tackle any new programs right now) 😩 Just need to find a way to identify the videos (maybe some text above it)? http://www.ww2survivorstories.com/School-Player.html Best Regards! Edited May 22, 2019 by ShipMate Link to comment Share on other sites More sharing options...
ShipMate Posted May 23, 2019 Author Share Posted May 23, 2019 (edited) Another Solution (using the tools I have now) *Still under construction .... http://www.ww2survivorstories.com/Erwin-Rommel.html Edited May 23, 2019 by ShipMate Link to comment Share on other sites More sharing options...
dsonesuk Posted May 23, 2019 Share Posted May 23, 2019 How it should be done 1 Link to comment Share on other sites More sharing options...
ShipMate Posted May 24, 2019 Author Share Posted May 24, 2019 Thanks dsonesuk .... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now