Select video but bring player into view afterwards

[theremotedr]

Sorry if this isnt the correct place but im not sure which section to put it in.

Here is the page in question http://www.theremotedoctor.co.uk/flip_remote_upgrade.html?scrollto=selection
I have supplied 2 screen shots to assist.

When my page loads i see the video player selections list which is fine see photo called page load.
Currently what happens is once a customer on a mobile device has made there selection the video player has now replaced the main image "which is fine" BUT the video player is off the screen.

What i would like to happen is after the video selection has been made the video player will replace the main image as required BUT then bring the video player into view,see photo called video placement.

Thanks very much.

[mlegg]

FYI after
<!-- left sidebar -->
<aside>
<h2 id="selection">ITEM SELECTION....</h2>
</h2>

that last </h2> is an extra, there is no open <h2> for it. I don't see the videos in Firefox 54.1.0 or Chrome Version 55.0.2883.87 m

[theremotedr]

Tomorrow I will take care of that extra h2
When you visit this page http://www.theremotedoctor.co.uk/flip_remote_upgrade.html?scrollto=selection
You will see the video selections.
Select 2004 G Vitara etc etc.
The main image will then be replaced with a splash screen and a play button.
On a mobile device this is currently out of sight hence looking for a code to bring it into view.

Happy new year
Now 01:30

[coothead]

Hi there theremotedr,


try the amended "player.js" file, which can be found in the attachment.

It starts to work, at present, when the video links drop below the video.

Of course, this option can be changed to suit.



coothead

[theremotedr]

That now brings the video down into view.
I need to fix the step before this.
When you first come to the page in question you are placed in the wrong part of the page.
Please see this short video example.

http://www.theremotedoctor.co.uk/videomp4/flip-remote-example.wmv
The Land Rover page is correct on its landing of the page "Item Selection".
However upon landing on the page Flip Remote Upgrade Videos you are just taken to the top of the page BUT needs to be "Item Selection" just like the Land Rover.

Land Rover code

<li><a href="acclandrover.html?scrollto=selection">LAND ROVER</a></li>

Flip Remote Upgrade Videos code

<li><a href="flip_remote_upgrade.html?scrollto=selection">FLIP REMOTE UPGRADE VIDEOS</a></li>

I dont see why its not taking you to where it should ?

By The Way,
Happy New Year All....

[coothead]

Hi there theremotedr,


the page does not scroll because the code is missing two images - ( see below ).

I have coded them into your page - ( see attachment below Thumbnails ).



coothead

[theremotedr]

You must of read my mind.
BUT these 2 images are not required on this page,thats why it will not scroll.
How do we apply the same scroll but without the images.

Also please if i may ask,the Player js file works great for when a button is pressed the video screen jumps into view,can we edit it so it glides into view ?

Many thanks for your time.

[coothead]

Hi there theremotedr,


I will see what I can do, if anything. :D



coothead

[theremotedr]

That would be great.
The player to glide would be Number 1 please.

I will look at the image situation.

Thanks for now.

[coothead]

Hi there theremotedr,


sorry, but that will have to be number 2. :eek:

The image problem is sorted. :D

On line #49 change this...



#clktoorder {
padding:1em 0;
}

...to this...



#clktoorder {
height: 0;
visibility: hidden;
}



coothead

[theremotedr]

Now done,Thanks

[coothead]

Hi there theremotedr,


check out the attachment for the latest amended script.


coothead

[theremotedr]

Hi,
That works & does the job,is there an adjustable section where i could adjust the speed at which it glides.

Not be ungrateful but could i speed it up a touch

[coothead]

Hi there theremotedr,


there certainly is. ;)

I left it slow as I did not know your requirements.

On line #35 of the "player.js" file, change this...



y--;

...to this...



y-=10; /* adjust value to suit */



coothead

[theremotedr]

Thanks very much.

[coothead]

Hi there the remotedr,


so -8 hit the spot then. :D;


coothead

[theremotedr]

Hi
-8 ? =8 I think it was.
Can see now as on iPhone.

Tell me, when you select the first video button do you see a grey background which looks like all the buttons are selected.

Also when each video ends did it not used to return to the splash screen as now oncevended it's just a black screen and you need to click on done ?

[coothead]

Hi there theremotedr,



Tell me, when you select the first video button do you see a
grey background which looks like all the buttons are selected.


No, I do not see that in any of my test browsers.



Also when each video ends did it not used to return to the
splash screen as now once ended it's just a black screen
and you need to click on done ?


I do not see that problem either.

What I do notice in IE and Chrome is the "social links bar"
on the left obscures a portion of the video. It does not
happen with Firefox as I have various blockers installed.

It is more of a problem in Chrome than in IE because the
"social links bar" actually obscures the "play" button.

I am really surprised that you feel the need to place your
links to social networks in such a prominent and
destructive position.


coothead

[theremotedr]

Tomorrow I will remove the social links for this page.
When I watch a video on a mobile device once finished it does not return to the splash screen like when you first come to the page
You see the Dr logo.
What happens is the video ends and it just shows a black screen.

[coothead]

Hi there theremotedr,


Have you considered that instead of reloading the
video you bring back the "REMOTE DOCTOR" image.

Users can quite easily click the appropriate video
choice button if they want to view it again.


coothead

[theremotedr]

That is what I mean.
Pc is ok as you see all the screen but on a mobile device the video ends, then you just stay on a black screen with the word done.
You have to click the word done to bring yourself back to the video selection.
On a previous post above when you first come to the flip remote upgrade video page remember we made it scroll to where you see "Video Selection".
This is also required for when the video ends, currently stops of last frame which is black.

So you visit the page.
Page scrolls to "Video Selection"
You make a selection.
Video plays & ends.
(Now on mobile device screen stays black,edit code so)
Video plays & ends.
Page scrolls to "Video Selection"
Thus creating a loop.

[coothead]

Hi there theremotedr,


I do not have a have mobile to test your assertion.

If you want to test my suggestion from post #20,
then try this modification...



pyr.onended=function() {
//pyr.load();
sph.style.display='block';
pyr.style.display='none';
};



coothead

[theremotedr]

Evening,
I added the code advised above to the player js file.
On my iphone when the video ends i see the following,see screen shot please.
6013

Can i ask what do you see at video end on your phone.

[Beverleyh]

theremotedr, the fullscreen video player is the native/default video player for small screen iOS. You cannot play video inline within the web page like you can with iPad, so what you're seeing (i.e. the screen cap) is correct. The end user must tap "done" to close the native video player and return to the web page. Please see Apple specs for further info https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

[coothead]

Hi there theremotedr


have you cleared the cache on your mobile?
If you have then I cannot help you further with this problem.

You will have to ask mobile appliance members for assistance.



coothead

[theremotedr]

Yes.
Beverleyh has explained the reason why this is happening.


Many thanks for you help today.