html - Display Video Frame in Mobile -


how display 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 doesn't display play button user might not know there video can played.

for mobile devices can make use of poster attribute of <video> tag.

please check the fiddle here.

controls optional attribute can added video tag bottom bar 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 1080p video mobile device phone doesn't make sense, video big screen, , bandwidth required send video may use of users limited data connection extremely quickly.

browser vendors have accounted , have disabled autoplay , preload attributes on mobile devices. it's idea include poster image can displayed until playback begins, though potentially require additional download. gives viewers meaningful idea of content without needing download video or start playback.


Comments

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

ios - UITEXTFIELD InputView Uipicker not working in swift -

Python Pig Latin Translator -