video on iPhone

Dale

unread,

Aug 21, 2022, 6:15:06 PM8/21/22

to

Hi,

On my iPhone-6s my videos only show an arrow to start with.

Pressing the arrow works fine.

Just thinking this isn't obvious to the visitor.

The videos can be found here ...

https://www.dalekelly.org/weblog.html

I have this in the head ...

<head>

(other stuff ...)

<style>
video {
max-width: 100%;
height: auto;
}
</style>

</head>

and here is an example video code ...

<video controls>
<source src="https://www.dalekelly.org/images/newwebcam.mp4"
type="video/mp4">
Your browser does not support the MP4 video tag.
</video>

--
Mystery? -> https://www.dalekelly.org/

Arno Welzel

unread,

Aug 22, 2022, 10:59:17 AM8/22/22

to

Dale, 2022-08-22 00:15:

> On my iPhone-6s my videos only show an arrow to start with.

This is by design. Browsers do not allow autoplay videos if they are not
muted. The only allowed way to let a video play is after a user interaction.

[...]

> <video controls>
> <source src="https://www.dalekelly.org/images/newwebcam.mp4"
> type="video/mp4">
> Your browser does not support the MP4 video tag.
> </video>

Try:

<video controls muted autoplay>

Or for Safari with additional "playsinline":

<video controls muted autoplay playsinline>

Just keep in mind - autoplay will not work, if the video is not muted
initially.

Also see:

<https://pqina.nl/blog/fix-html-video-autoplay-not-working/>

--
Arno Welzel
https://arnowelzel.de

Dale

unread,

Aug 22, 2022, 1:26:12 PM8/22/22

to

On 8/22/2022 10:59 AM, Arno Welzel wrote:
> Dale, 2022-08-22 00:15:
>
>> On my iPhone-6s my videos only show an arrow to start with.
>
> This is by design. Browsers do not allow autoplay videos if they are not
> muted. The only allowed way to let a video play is after a user interaction.
>

Not looking for an autoplay. What's its value?

there isn't an image to start with behind the arrow on the iPhone, using
Chrome, just an arrow

Chrome and Edge on Windows 10 have an image in its toolbar

Amazon Silk on a Fire-TV has an image with a centered arrow, but no
arrow in its toolbar

> [...]
>> <video controls>
>> <source src="https://www.dalekelly.org/images/newwebcam.mp4"
>> type="video/mp4">
>> Your browser does not support the MP4 video tag.
>> </video>
>
> Try:
>
> <video controls muted autoplay>
>
> Or for Safari with additional "playsinline":
>
> <video controls muted autoplay playsinline>
>
> Just keep in mind - autoplay will not work, if the video is not muted
> initially.
>
> Also see:
>
> <https://pqina.nl/blog/fix-html-video-autoplay-not-working/>
>
>

Thank You ! Will give this a try.

Arno Welzel

unread,

Aug 23, 2022, 9:34:00 AM8/23/22

to

Dale, 2022-08-22 19:26:

> On 8/22/2022 10:59 AM, Arno Welzel wrote:
>> Dale, 2022-08-22 00:15:
>>
>>> On my iPhone-6s my videos only show an arrow to start with.
>>
>> This is by design. Browsers do not allow autoplay videos if they are not
>> muted. The only allowed way to let a video play is after a user interaction.
>>
>
> Not looking for an autoplay. What's its value?
>
> there isn't an image to start with behind the arrow on the iPhone, using
> Chrome, just an arrow

Yes, this is by design. Ask Apple about that.

> Chrome and Edge on Windows 10 have an image in its toolbar

Yes, this is by design - Google and Microsoft decided to do it this way.

> Amazon Silk on a Fire-TV has an image with a centered arrow, but no
> arrow in its toolbar

Again - because Amazon liked to have it so.

If you don't like this, you need to create your own image with an
surrounding <a> element which is display *instead* of the video. Then
add a JavaScript onclick handler which will hide the image and then
reveal the video behind it and start the video playing.

Dale

unread,

Aug 23, 2022, 5:19:24 PM8/23/22

to

Thank You !

With the differences I see based on browser/OS I'm going to stick with
it as is

and perhaps I worry about using cookies and scripts too much

Dale

unread,

Aug 23, 2022, 9:57:15 PM8/23/22

to

options here ...

https://github.com/dalekellytoo/html_videos/

J𝕒𝕞𝕖𝕤 𝕂𝕚𝕣𝕜

unread,

Aug 27, 2022, 2:23:38 PM8/27/22

to

In Message <tduap6$2eoac$1...@dont-email.me>
On Sunday Aug 21, 2022 6:15 pm -04:00

Dale <da...@dalekelly.org> wrote:

> Hi,

> On my iPhone-6s my videos only show an arrow to start with.

> Pressing the arrow works fine.

> Just thinking this isn't obvious to the visitor.

> The videos can be found here ...

> https://www.dalekelly.org/weblog.html

[snip]

MDN is a good resource. Information about the video element can be
found here.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

Preload attribute:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload

Prehaps preload="metadata"

If that does not produce the results you are looking for then perhaps
the poster attribute:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-poster

poster="yourImage.jpg"

--
J𝕒𝕞𝕖𝕤 𝕂𝕚𝕣𝕜