Jump to content

No Initial Video Image In The Player Screen


ShipMate

Recommended Posts

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 by ShipMate
Link to comment
Share on other sites

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>
  • Like 1
Link to comment
Share on other sites

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 by ShipMate
grammer
Link to comment
Share on other sites

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.

XcQfW3F.png

  • Like 1
Link to comment
Share on other sites

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 ....

HTML Screen.jpg

Edited by ShipMate
Inclusion of additional info
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

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 by ShipMate
missing data
Link to comment
Share on other sites

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 by ShipMate
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...