CODEWITHSUNDEEP
html
hahahaha
hahahaha

Reputation: 1031

Display Video Frame in Mobile

How to display the frame of video in mobile?

<video width="100%" height="100%" type="video/mp4">
    <source src="{{ asset('videos/home_1.mp4') }}" type="video/mp4">
</video>

The actual output (iOS): enter image description here

In Android it doesn't even display a play button so the user might not know there is a video can be played.

Upvotes: 0

Views: 1068

Answers (1)

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6642

For mobile devices you can make use of the poster attribute of the <video> tag.

Please check the Fiddle here.

controls optional attribute can be added to video tag to get the bottom bar with play, volume controls. 

<video width="100%" height="100%" controls poster="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
  <source src="{{ asset('videos/home_1.mp4') }}" type="video/mp4">
</video>

Sending a 1080p video to a mobile device like a phone doesn't make much sense, the video will likely be too big for the screen, and the bandwidth required to send the video may use all of the users limited data connection extremely quickly.

Browser vendors have accounted for this and have disabled the autoplay and preload attributes on mobile devices. It's also a good idea to include poster image that can be displayed until playback begins, though this does potentially require an additional download. This gives viewers a meaningful idea of content without needing to download video or start playback.

Upvotes: 1

Related Questions