Video player set up

[theremotedr]

Evening,
This is the page in question, http://www.theremotedoctor.co.uk/cloning_programming_slideshow_2.html?scrollto=content

I have removed the old player & its files from the page and inserted the following.


<h1>
<video id="video" class="shadow">
<source id="mp4" src="videomp4/cloning-programming.mp4" type="video/mp4">
</video>
</h1>

Could you advise the setup for it to start to play on its own once you arrive on this page.
The video is 700x578

[coothead]

Hi there theremotedr,



try it like this...


<video id="video" class="shadow" autoplay="autoplay">
<source id="mp4" src="videomp4/cloning-programming.mp4" type="video/mp4">
</video>


coothead

[theremotedr]

Thanks.
As you can see ive taken it from here http://www.theremotedoctor.co.uk/cloning_programming_slideshow.html?scrollto=content

Now just need to make the adjustments so its 700x578 & the border,basically to match the page i took it from.

Also the recycle code so when it finishes it just loops again "constant playing loop"

[coothead]

Hi there theremotedr,


why have you wrapped the video in a "h1 element"?

It is inappropriate and very poor coding. :eek:

There should only be one "h1 element" per document and
that should be used for a page title, logo or banner.

Further reading:-


Improper use of numbered headings (http://www.cutcodedown.com/article/whats_wrong_with_YOUR_website_part2#section_2_9)


coothead

[coothead]

Hi there theremotedr,



for looping try it like this...


<video id="video" class="shadow" autoplay="autoplay" loop="loop">
<source id="mp4" src="videomp4/cloning-programming.mp4" type="video/mp4">
</video>


coothead

[theremotedr]

Now changed.
Would i need to put the video into its own div so its 700x578 as opposed to its large display now & its radius edges ?

[coothead]

Hi there theremotedr,


it does not need an h1 or a div, you already have it in a container. ;)

This is how the HTML should look...



<section id="content">
<video id="video" class="shadow" autoplay="autoplay" loop="loop">
<source id="mp4" src="videomp4/cloning-programming.mp4" type="video/mp4">
</video>
</section>

...and this is how your CSS should look...



.shadow {
margin: 1em 0;
border-style: 1px solid #000;
box-shadow: 6px 6px 8px #000;
}



coothead

[theremotedr]

I couldn't find the appropriate css file for this container.
I wanted to see why it's not 700x578 like it should be.
I thought putting it on its own code would cover it & wasn't sure if anything was using the same code.

[coothead]

Hi there theremotedr,


you will find it on line #531 of your "normalize.css" file.

If you don't want to alter or use it from there, then
remove the class name of the "video element"
altogether and, using the existing id, add the CSS to
an appropriate file of your choosing.

HTML



<section id="content">
<video id="video" autoplay="autoplay" loop="loop">
<source id="mp4" src="videomp4/cloning-programming.mp4" type="video/mp4">
</video>
</section>

CSS



#video {
max-width: 43.75em;
margin: 1em 0;
border: 0.06em solid #000;
box-shadow: 0.5em 0.5em 0.5em #000;
}


coothead

[theremotedr]

Hi,
Come to a halt so off to bed & see if i can pin point the issue in the morning.

Page in question http://www.theremotedoctor.co.uk/cloning_programming_slideshow_2.html?scrollto=content

HTML used,

<section id="content">
<video id="movavivideo" autoplay="autoplay" loop="loop">
<source id="mp4" src="videomp4/cloning-programming.mp4" type="video/mp4">
</video>
</section>

CSS used & placed in the Normalize.css file line 608

#movavivideo {
max-width: 43.75em;
margin: 1em 0;
border: 0.06em solid #000;
box-shadow: 0.5em 0.5em 0.5em #000;
}

[coothead]

Hi there theremotedr,


it took me quite a while to track this problem down.

There was a strange reoccurring symbol - ( ​ ) - in your normalize.css file!!!! :eek:

There was one just before the code that you inserted and it presumably stopped it from being parsed.

The attached replacement has been cleansed of all the little buggers. ;)

Don't forget the cache clearing procedure. :D


coothead

[theremotedr]

Where did that come from ?
New file now installed & all good,thanks.

One last thing that i did notice was on the phone.

Ive looked at some of the files but yet again did not see anything.
Any pages from the header "Keys And Remotes" HONDA

http://www.theremotedoctor.co.uk/karaccord.html?scrollto=selection
http://www.theremotedoctor.co.uk/karcivic.html?scrollto=selection
http://www.theremotedoctor.co.uk/karcrv.html?scrollto=selection

Pc fine but Phone is out of line to the right.
I was wondering did you have the old css file on your pc before it was cleaned just in case its css related ?

6025

[coothead]

Hi there theremotedr,


the only problem that I can see, and this is on all the pages, is a
horizontal scrollbar appears at about 360px width.

I am responsible for this error. :eek:

When validating your pages I found deprecated "hspace attributes"
on images in the footer section.

These were removed and replaced with CSS but the value that I
gave was rather too large hence the scrollbar.

In the "latestChanges.css" file change this....



footer img {
margin: 0 0.25em;
}


...to this...



footer img {
margin: 0 0.1em;
}




coothead

[theremotedr]

made no difference on the phone.
I will leave it as is whilst i pop out for an hour,then check when back.

Do you still have the old css file,i could just swap it over and see ?
Otherwise im stumped again.

[theremotedr]

I found an old css file.
Installed it and now alignment and also colour is as it should be BUT ive attached it if you could check it out please.
Basic css
Probably pick it up from the Lime colour 00FF00
6026

Ive put the current css file back into my site so i know where i am until its fixed.

Thanks

[coothead]

no I don't have it.

Do make the change that I gave you, it will remove the horizontal scrollbar.

You need a mobile user member to look at any perceived mobile problems.

[theremotedr]

Hi,
I have gone through the Basic css file which is currently installed & also i found an old back up Basic css file.
The only difference that i can see in the 2 files is this code shown below which was right at the bottom of my Basic css file.
With the code shown below removed the phone now shows the text inline no problem.
If i put the code below back into the Basic css file the text then goes off to the right.

Please take a look and see what it might be for,if you can.

0
@-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Firefox */
@-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Webkit */
@-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */
@keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */

.blinking {
border:1px solid #000;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
/* order: name, direction, duration, iteration-count, timing-function */
-moz-animation:blink normal 2s infinite ease-in-out; /* Firefox */
-webkit-animation:blink normal 2s infinite ease-in-out; /* Webkit */
-ms-animation:blink normal 2s infinite ease-in-out; /* IE */
animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}​

I have tried with part of it but no joy so i then removed that section of text & tried the other half but no joy.
With both of it removed the phone is fine.

[theremotedr]

Ive found the same code on a usb stick.
Copied the same code and replaced it on my css file in place of the duff one.
Works fine.

Must of had a small issue that couldnt be seen,but all ok now.

Thanks for looking

[theremotedr]

Just checked these 2 videos on my iPad but both have the same issue.
When you come to the page in question it should auto play PC I assume.
Ipad & Iphone I believe that there is a play button in the way of a side on triangle in the center of the video then the user having to manually press it to watch the video.
iPad does not show this play button but just the very start of the video which looks like a image/splash screen.
There is no option for them to play.

I have downloaded the video on my iPad using some software,clicked on the play button and it plays fine.
http://www.theremotedoctor.co.uk/cloning_programming_slideshow.html?scrollto=content
http://www.theremotedoctor.co.uk/profile.html?scrollto=content

6029
6030

[coothead]

Hi there theremotedr,


try adding muted and playsinline as attributes....



<video id="movavivideo" muted playsinline autoplay loop>

Further reading:-


New <video> Policies for iOS (https://webkit.org/blog/6784/new-video-policies-for-ios/)



coothead

[theremotedr]

Morning,
Ive replaced the line of code with,


<video id="movavivideo" muted playsinline autoplay loop>
But it made no difference.

The video in use has no audio.

Ive looked at the page for new Polices for ios but after reading it there is to much for me to take onboard & trying various changes the video doesnt work for me.
As much as i would like to understand it i am unable to completely take it onboard.

[coothead]

Hi there theremotedr,


Perhaps Beverley (http://www.dynamicdrive.com/forums/member.php?31699-Beverleyh) or some other member with iOS
experience may be able to shed some light on this.

Send her a polite but impassioned P.M. :D



coothead

[theremotedr]

Hi,
I will kindly ask Beverley for help / pointer,thanks.

FYI,
The video here http://www.theremotedoctor.co.uk/cloning_programming_video.html?scrollto=content
Works as it should on the PC & iPhone.

The video here http://www.theremotedoctor.co.uk/profile_video.html?scrollto=content
Works as it should on the PC & iPhone.

On the iPad when you visit each page the start of the video is shown but nothing happens,just some info for you.

I will know check out those pages we spoke about in the list from last night that vanished as you scroll down.

[theremotedr]

Beverley does not accept P.M

[theremotedr]

Using this page http://www.theremotedoctor.co.uk/accford.html?scrollto=selection
I have done a short video showing what i see when scrolling down the KEYS & REMOTE list.
Using Chrome.

http://www.theremotedoctor.co.uk/videomp4/scroll_list.mp4

Updated link now with mp4 video

[coothead]

Hi there theremotedr,


in your video, you appear to have a very strange cursor for Chrome. :eek:

I have made a video of my experience with Chrome on the very same page.

But instead of uploading it to my site for direct playing I uploaded it to a depository for downloading.

You can download it here...


chrome-scrolling.mp4 - ( 7.78MB ) (http://www.mediafire.com/file/o1gnhm4x72916j7/chrome-scrolling.mp4)

...if you are interested. :D



coothead

[theremotedr]

Hi,
what recording software are you using to capture that video.
Never mind,ive changed settings and the orange blob is now gone so you see just a standard cursor now.

[coothead]

Hi there theremotedr,


I use "Snagit 13", how about you? :D


coothead

[theremotedr]

I use Microsoft Expression Encoder.
Regarding the video issue for the ipad is there another approach to get it going ?
Basically the ipad mimics the pc just a smaller version if you know what i mean.

Open to suggestions obviously :cool:

[coothead]

Hi there theremotedr,


whilst waiting for Beverly's or another member's wisdom, you could try
adding "controls" to the video tag.

All these suggestions can be removed if and when a solution is found. :D

I can test IE8 and Windows XP on an old steam driven machine no
problem but iPod, iPad, iPhone and Android are out of my reach.

I would have one of these devices if I could just use it for testing
purposes, but it seems that I have to have all the expenses that
go with these mobile devices.


coothead

[theremotedr]

I have now added Controls and this is what i see,

IPAD
......
Landing on the page start of video is shown with a triangle play button in the middle. "This is ok"
Clicking the play button then starts the video. "This is ok"
The video runs its course & once finished returns to the start where on its own starts to play again. "This is ok"
"Video works spot on"



IPHONE
..........
Works exactly the same as above,apart from one issue. "See below"
Problem is when the phone is in Landscape mode you only see say 3/4 of the viewing video etc.
The output for Landscape mode needs to fit the screen so you see the all the image & its text above & below it,output needs to be scaled down to fit.
When viewing in Portrait mode all is ok & no issues.
"Video works spot on"



PC
...
Landing on the page start of video is shown BUT say like a letter box 700x300 "Needs attention"
Then the video automatically changes to its correct size 700x578
The player controls are below the video as opposed to the middle like iphone & ipad, "This is ok"
The video starts without any need to press the play button. "This is ok"
The video runs its course & once finished returns to the start where on its own starts to play again. "This is ok"
When it returns to the start it stays the 700x578 size.
I only see the letter box 700x300 when you first land on the page
"Video works spot on"

Screen shots below of iphone in landscape & portrait mode.

6032
6033

So,
iPhone output for viewing in landscape mode needs altering so its all in the viewable part of the screen.
Pc needs to just show 700x578 when landing on the page without the need to see say 700x300 then some magic to 700x578

Overall perfect.
Just need to sort the two issues.

[theremotedr]

Quick video showing letter box.

http://www.theremotedoctor.co.uk/videomp4/letter-box-example.mp4

[coothead]

Hi there theremotedr,


try adding width and height...


<video id="movavivideo" controls muted playsinline autoplay loop width="700" height="580">



coothead

[theremotedr]

I did try that but still the same.
I didnt mention it before as i was going to see what you thought.
I will live with this.

So can you please point me in the correct direction for looking at the output code etc so the video in landscape mode is correct.

[theremotedr]

can we apPly its own css for display purposes,so i can they alter the size until it looks ok ?

[coothead]

Hi there theremotedr,


unfortunately, you have lost me a little bit,
to what browser/OS does this problem relate?


coothead

[theremotedr]

End of post 31
iPhone output for viewing in landscape mode needs altering so its all in the viewable part of the screen.
Looking in the Normalize css file at line 604 i see this,


video {
width: 100%;
height: auto;
}
#movavivideo {
max-width: 43.75em;
margin: 1em 0;
border: 0.06em solid #000;
box-shadow: 0.5em 0.5em 0.5em #000;
}

Is the alteration made there or in the Basic css file at some @media screen point

Looking to just make the Landscape height smaller so all the video can be seen as at present im having to scroll up/down to see it all.

[coothead]

Hi there theremotedr,


try these values in a test page...


#movavivideo {
width: 100%;
max-width: 43.75em;
height: auto;
margin: 1em 0;
border: 0.06em solid #000;
box-shadow: 0.5em 0.5em 0.5em #000;
box-sizing: border-box;
}
@media screen and (max-width: 46em) {
#movavivideo {
width: 64%;
margin: 0.5em auto;
}
}
@media screen and (max-width: 30em){
#movavivideo {
width: 100%;
margin: 0.5em auto;
}
}
@media screen and (max-width: 20em) {
#movavivideo {
width: 100%;
margin: 0.5em auto;
}
}

[theremotedr]

Hi,
Ive installed that code in place of the code in Normalize css line 604
Pc is fine.

Iphone need some slight adjustment,but not much.
When you land on this page in portrait mode the video is shown slightly to far down the screen and needs to come up.

When you turn the phone to landscape mode the video is shown slight to high the screen so needs to come down.

If you can advise which setting i need to alter i can take a look at it.

Just a question,
Even though i set it up so it looks fine on my iphone how will this take affect for other makes of phone, i mean will it also be within view for them also ?

[theremotedr]

My mistake.
Just landscape need to bring video down the screen a touch.

[coothead]

Hi there theremotedr,


try adjusting this value...


margin: 0.5em auto;


...how will this take affect for other makes of phone...

I couldn't possibly answer that.
I used this site...


The Ultimate Guide To iPhone Resolutions (https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions)

..when wrestling with you problem.


coothead

[theremotedr]

Morning,
I left the code you advised above last night and this morning all is ok ?
I have also noticed on Iphone & Ipad that now the video starts to play without having to press the play button like yesterday ?

This is even better.
Many thanks

[coothead]

Hi there theremote,


I would assume that adding the "controls attribute" to the "video element"
had the effect of enabling previously disabled attributes.


coothead

[theremotedr]

Hi,
That would make sense.

Could you take a look at this please http://stackoverflow.com/questions/14490287/iphone-android-induce-native-dropdown-picker
End result would be mobile device to show/work like the California image.
What do you think ?

[coothead]

Hi there theremotedr,


I could code that for a p.c. but, of course,
I can not test it on a mobile device.


coothead

[theremotedr]

I can test on a mobile no problem if i had it installed that is :cool:
The settings on my site work fine on the mobile in respect of width responsive looks etc etc.

[coothead]

Hi there theremotedr,


as this thread is marked "Resolved" and your latest problem is
unrelated, I would suggest that you start a new thread for it.

Also, a little more information will required as to it's purpose.

For instance are we talking about links here or something else?



coothead

[theremotedr]

Hi,
You are correct,i should start a new post.

Here it is http://www.dynamicdrive.com/forums/showthread.php?80861-fruit-machine-reels-picker-list&p=320344#post320344