Databases
StackOverflow2013
Postsdbo
POhow to play html5 video without using autoplay because it buffers EVERYTHING and slows really down page load
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to play html5 video without using autoplay because it buffers EVERYTHING and slows really down page load
    primarykey
    data
    text
    <p><strong><em>Sample code is at the end of the post for reference.</em></strong></p> <p>Sorry for being so long winded, just trying to be through and leave no possible relevant info out.</p> <p>This seems like I painted myself in a bit of a corner. I have a show hide toggle function that seems to work fine. I have a small army of DIVs that are each shown and hidden when menu items are clicked. This is a video gallery. The buttons are in a JQuery scripted slider and are in an html list. CSS is used with Div IDs </p> <p>The function and hiding all work great. This seems to be a strategy question since if I want the appropriate video to start playing when the div is shown, I remove preload="none" when I load this page, ALL 32 videos appear top be buffering and it KILLS page loading times. When I have preloading set to none, the video sits there ready to be played after somebody clicks the appropriate button to show it. I and my clients expect to see the movie start to play once the window displays. As a matter of fact, once the window comes up and the video says "loading", all I have to do is hit play and it starts playing smoothly. So, without using autoplay, is there a way to get the video to play when the button is pressed to un-hide the appropriate div?</p> <p>BTW I am using Video for Everyone as a base but it doesn't seem to offer a solution for more than a couple of videos.</p> <p>Perhaps my video format is wrong but I am using h264 video saved out of quicktime pro in a .m4v extension. I am trying to also find out if the format can autoplay but I know OGV cannot so I'm not pinning much hope on that. Also, I will add a flash fallback.</p> <p>Please be kind of my code because I'm just an animator and know nothing of this stuff really. Also, it looks like my show hide function is getting truncated by the viewer. It's there and works fine, really.</p> <pre><code>&lt;script&gt; &lt;!-----Javascript-----&gt; function hideAll(){ tag = document.getElementsByTagName("div"); for(x=0;x&lt;tag.length; x++){ //alert(tag[x].getAttribute('id')); if(tag[x].getAttribute('id').indexOf("hide") != -1){ //alert(tag[x].getAttribute('id')); tag[x].style.display = "none"; } } } function show(id){ el = document.getElementById(id); if(el.style.display == "none"){ hideAll(); el.style.display = "block"; } else { el.style.display = "none"; document.getElementById('hide').style.display = ""; } } &lt;/script&gt; &lt;!-----The list of buttons inside of the div slider-----&gt; &lt;li&gt; &lt;div id="MenuGroup"&gt; &lt;div id="MoviePicL1"&gt; &lt;span style="cursor:pointer" onClick="show('hide1')"&gt;&lt;img src="images/Posters/Movie1image"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div id="MoviePicL2"&gt; &lt;span style="cursor:pointer" onClick="show('hide2')"&gt;&lt;img src="images/Posters/Movie2image"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div id="MoviePicL3"&gt; &lt;span style="cursor:pointer" onClick="show('hide3')"&gt;&lt;img src="images/Posters/Movie3image"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; </code></pre> <p>What they are toggling are these:</p> <pre><code>&lt;div id="hide2" style="display:none;"&gt; &lt;div id="VideoContainerDiv" class="mybox"&gt; &lt;video id="Movie1_Reel" width="580" height="326" controls preload="none"&gt; &lt;source src="Videos/movie1_Reel" type="video/ogg"&gt;&lt;/source&gt; &lt;source src="Videos/movie1_Reel" type="video/mp4"&gt;&lt;/source&gt; &lt;/video&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmattbasta
    1. USPleaseluggage
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POhow to play html5 video without using autoplay because it buffers EVERYTHING and slows really down page load
      1. USSean Lee
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload