Video non responsive

[ipbr21054]

Evening all,

Here is the page in question http://www.theremotedoctor.co.uk/honda_flip_remote_upgrade.html?scrollto=content

I have just noticed that the video mp4 does not play.
Clicking on the label HONDA JAZZ EXAMPLE has no affect.

Ive taken a look at it but cant put my finger on the problem.
The video works fine but not when this label is pressed.

[styxlawyer]

The first thing I notice is that the <img ...> tag on preceding line (239) isn't terminated. You should also address some of the errors shown on the validator (https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.theremotedoctor.co.uk%2Fhonda_flip_remote_upgrade.html%3Fscrollto%3Dcontent). Particularly numbers 4 & 5 in that list.

[ipbr21054]

I dont see what is wrong with this,


<section id="content">
<h1>
<img id="splash" src="videoimages/flip-splash-screen.png" alt="splash">
<video id="player" controls poster="videoimages/jazz.png" class="shadow">
<source id="mp4" src="videomp4/jazz.mp4" type="video/mp4">
</video>
</h1>
</section>

[Beverleyh]

Is there any particular reason why you are not using your usual account http://www.dynamicdrive.com/forums/member.php?61545-theremotedr? If you are having problems logging in, let us know and we can try to assist.

As for the problems you are experiencing on your page, please follow the previous advice and clean up the errors using the validator. With a cleaner page, it will be easier for you to assess where your problems are originating - the problem may even be resolved through exercising the code validation task (you receive this advice regularly so it's surprising that, as a senior coder, you don't reach for this as the first string in your troubleshooting bow, and rule validation errors out as the root of your problems, before posting).

You could also consider making a reduced test case in something like JSBin, JSFiddle or CodePen, using just enough code to demonstrate or isolate the problem. The page you have linked to contains *a lot* of code which will put many folks off troubleshooting for you. Make a reduced demo to help us to help you.

You might also need to review the syntax/elements, or any JavaScript you are using to make sure they are being implemented correctly, and build up your code again from a very basic example. For help with correct video element usage, you can refer to developer guides online (a quick Google for "HTML5 video tag" with bring up many examples). If you are using JavaScript to open the video, show it to us - the easiest way will be in a reduced test case so that we need only concentrate on the video, label and any JavaScript that relates to just this aspect of the page.

To summarise;
- clean up your code using the validator to see if that fixes the issue
- check your usage/syntax of the video element and JavaScript (and possibly try another video in case the MP4 encoding is causing the problem)
- create a reduced test case to demonstrate and isolate the problem if it still persists
- recreate the page bit by bit until you identify any influencing factors

[coothead]

Hi there ipbr21054,




I have just noticed that the video mp4 does not play.

Well, it certainly couldn't have happened by itself. :rolleyes:

The video was originally activated by "JavaScript" and the
script in question has been removed from the document. :eek:

Well, that certainly didn't happen by itself. :rolleyes:

I have corrected and validated your coding errors
but not tidied up the general mess.

The missing script has been reinstated and tested.

Check out the attachment to find your amended file. ;)


coothead

[theremotedr]

Hi there ipbr21054,





Well, it certainly couldn't have happened by itself. :rolleyes:

The video was originally activated by "JavaScript" and the
script in question has been removed from the document. :eek:

Well, that certainly didn't happen by itself. :rolleyes:

I have corrected and validated your coding errors
but not tidied up the general mess.

The missing script has been reinstated and tested.

Check out the attachment to find your amended file. ;)


coothead

Well what can i say ????
I watched the video and now it works,thanks very much.
At the end of the video once finished it stayed on the last frame,i would like it to the return to the start again should the user wish to push the play button again.
I added the following,taken from my notes, to hopefully return to start but not quite as it returns to my splash screen image.


<script>
'use strict';
(function() {
document.getElementById('myvideo3').onended=function() {
this.load();
};
})();
</script>

This is what should happen.
User arrives on the page.
My splash screen image is shown.
User clicks Honda Jazz example.
My splash screen image is now replaced with the video player.
Video plays & once finished returns to my splash screen image BUT should return to video player.

[theremotedr]

Is there any particular reason why you are not using your usual account http://www.dynamicdrive.com/forums/member.php?61545-theremotedr? If you are having problems logging in, let us know and we can try to assist.

As for the problems you are experiencing on your page, please follow the previous advice and clean up the errors using the validator. With a cleaner page, it will be easier for you to assess where your problems are originating - the problem may even be resolved through exercising the code validation task (you receive this advice regularly so it's surprising that, as a senior coder, you don't reach for this as the first string in your troubleshooting bow, and rule validation errors out as the root of your problems, before posting).

You could also consider making a reduced test case in something like JSBin, JSFiddle or CodePen, using just enough code to demonstrate or isolate the problem. The page you have linked to contains *a lot* of code which will put many folks off troubleshooting for you. Make a reduced demo to help us to help you.

You might also need to review the syntax/elements, or any JavaScript you are using to make sure they are being implemented correctly, and build up your code again from a very basic example. For help with correct video element usage, you can refer to developer guides online (a quick Google for "HTML5 video tag" with bring up many examples). If you are using JavaScript to open the video, show it to us - the easiest way will be in a reduced test case so that we need only concentrate on the video, label and any JavaScript that relates to just this aspect of the page.

To summarise;
- clean up your code using the validator to see if that fixes the issue
- check your usage/syntax of the video element and JavaScript (and possibly try another video in case the MP4 encoding is causing the problem)
- create a reduced test case to demonstrate and isolate the problem if it still persists
- recreate the page bit by bit until you identify any influencing factors

No problem other than pc would not let me log in with normal details.
Today its all ok & now logged in with usual details.

I understand what you are saying with regards the mess.My site to me looks & works like i require it to but when i try & start to clean up the errors i make more.As you can tell im not wizard at this so i need to run with what works for me but in the hidden background is this mess.

Its not the correct way to move forward but im happy with what ive done so far in respect of my site but will try & clean it up.

[coothead]

Hi there theremotedr/ipbr21054,




At the end of the video once finished it stayed on the last frame, I would like it
to return to the start again should the user wish to push the play button again.


Open the "player.js" file with your text editor, find this...



pyr.onended=function() {
sph.style.display='block';
pyr.style.display='none';
};
...and change it to this...



pyr.onended=function() {
pyr.load();
};



coothead

[theremotedr]

Morning,
I have removed the code that i added yesterday,

<script>
'use strict';
(function() {
document.getElementById('myvideo3').onended=function() {
this.load();
};
})();
</script>

Then made the edit as advised above.

pyr.onended=function() {
pyr.load();
};
})()

I am still seeing the splash screen image once video has ended as opposed to the start of the video again.
Please take a look,

http://theremotedoctor.co.uk/honda_flip_remote_upgrade.html?scrollto=content

[coothead]

Hi there theremotedr/ipbr21054,


You need to clear cache with the F5 function key. ;)


coothead

[theremotedr]

Morning Coothead,
Does the url i supplied show its working correct for you ?

I ask because i did use F5 but no change after say 20 minutes.
I then deleted the file and uploaded it again but still the same.

[theremotedr]

OK
Just watching it again,it does revert back to the start of the video but then withing a flash it then goes back to the splash screen.
From end of video to start to splash screen is milliseconds.

[coothead]

Hi there theremotedr,


yes, it is working for me and my test browsers. :D


coothead

[theremotedr]

Please take a look at this.

http://www.theremotedoctor.co.uk/forums/coothead.wmv

[coothead]

Hi there theremotedr,


does this happen in all of your test browsers?


coothead

[mlegg]

Your page doesn't play the clip, it sets it to make my browsers try to download it.

[coothead]

Hi there mlegg,


to which page are you referring?

I assume that it must be something other than the page in question ...


http://theremotedoctor.co.uk/honda_flip_remote_upgrade.html?scrollto=content[



coothead

[theremotedr]

Coothead i put up a small clip url link.
I am using chrome and it wants to download as opposed to playing the clip.
I have played the clip in Firefox no problem.
So because of this i do not know what you are seeing ?

What i see after the video has ended after adding your code is the Dr logo with text saying "Honda flip remote upgrade Jazz shown" with clouds background.
What i should be seeing after the video has ended is the white background with text "Honda Jazz flip remote upgrade" along with the play button.

See images attached.59675968

[coothead]

Hi there theremotedr,


"Chrome 54.0.2840.71 m" is also one of my test browsers. ;)

This is what I see after the video has ended...

5968

...in all my test browsers, when using this link...


http://theremotedoctor.co.uk/honda_flip_remote_upgrade.html?scrollto=content

Does your version possibly have an extension problem?



coothead

[theremotedr]

Strange as i am using the same version chrome.
Extension wise i only have say 5 but non related to this.
I will turn then off and on to see if any difference is shown.

Be back soon.

[theremotedr]

Turning all of them off/on made no difference.
As i can see it works fine in Firefox all is ok.

i will leave it at that.

Many thanks for your time with this.

[mlegg]

coothead this link he posted http://www.theremotedoctor.co.uk/forums/coothead.wmv

[theremotedr]

That link is for video clip.
It works fine in firefox just chrome it wants to download it

[coothead]

Hi there mlegg,


Aaaah, that one. :)

Well, it would, it's a .wmv file. :D


coothead