I am having a lot of problems with blob URL.

I was searching for `src` of a video tag on YouTube and I found that the video `src` was like:
    
    src=&quot;blob:https://crap.crap&quot;

I opened the blob URL that was in `src` of the video it gave an error. I can&#39;t open the link, but it was working with the `src` tag. How is this possible?

Requirements:

- What is blob URL?
- Why it is used?
- Can I make my own blob URL on a server?
- If you have any additional details

What is a blob URL and why it is used?

How do you detect when a HTML5 `&lt;video&gt;` element has finished playing?

Detect when an HTML5 video finishes

I am trying to control HTML5 videos using JQuery. I have two clips in a tabbed interface, there are six tabs in total, the others just have images. I am trying to make the video clips play when their tab is clicked and then stop when any of the others are clicked.

This must be a simple thing to do but I cant seem to get it to work, the code I am using to play the video is:

    $(&#39;#playMovie1&#39;).click(function(){
	  $(&#39;#movie1&#39;).play();
          });

I have read that the video element needs to be exposed in a function to be able to control it but can&#39;t find an example. I am able to make it work using JS:

    document.getElementById(&#39;movie1&#39;).play();

Any advice would be great. Thanks



Play/pause HTML 5 video using JQuery

I&#39;m getting the error message..

&gt; Uncaught (in promise) DOMException: play() failed because the user didn&#39;t interact with the document first.

..when trying to play video on desktop using Chrome version 66.

I did find an ad that began playback automatically on a website however using the following HTML:

    &lt;video
        title=&quot;Advertisement&quot;
        webkit-playsinline=&quot;true&quot;
        playsinline=&quot;true&quot;
        style=&quot;background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;&quot;
        src=&quot;http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4&quot;
        autoplay=&quot;&quot;&gt;&lt;/video&gt;

So is by-passing Chrome v66&#39;s autoplay blocker really as easy as just adding the `webkit-playsinline=&quot;true&quot;`, `playsinline=&quot;true&quot;`, and `autoplay=&quot;&quot;` attributes to the `&lt;video&gt;` element? Are there any negative consequences to this?

How to handle &quot;Uncaught (in promise) DOMException: play() failed because the user didn&#39;t interact with the document first.&quot; on Desktop with Chrome 66?

I am getting this download button with `&lt;video&gt;` tags in Chrome 55, but not on Chrome 54:
[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/Ii1m2.png

How can I remove this so no one can see the download button in Chrome 55?

I have used `&lt;video&gt;` tag to embed this video on my web page. So, I want some kind of code to remove this download option.

Here is my current code:

    &lt;video width=&quot;512&quot; height=&quot;380&quot;  controls&gt;
        &lt;source data-src=&quot;mov_bbb.ogg&quot; type=&quot;video/mp4&quot;&gt;
    &lt;/video&gt;



In Chrome 55, prevent showing Download button for HTML 5 video

How can I disable &quot;Save Video As...&quot; from a browser&#39;s right-click menu to prevent clients from downloading a video?

Are there more complete solutions that prevent the client from accessing a file path directly?

Prevent HTML5 video from being downloaded (right-click saved)?

I opened a webcam by using the following JavaScript code: 

```js
const stream = await navigator.mediaDevices.getUserMedia({ /* ... */ });
```

Is there any JavaScript code to stop or close the webcam? Thanks everyone.




Stop/Close webcam stream which is opened by navigator.mediaDevices.getUserMedia

How to change the video play speed in HTML5? I&#39;ve checked [video tag&#39;s attributes][1] in w3school but couldn&#39;t approach that.


  [1]: https://www.w3schools.com/html/html5_video.asp

How to change the playing speed of videos in HTML5?

I have two applications as mentioned below:

 1. Admin application  through which I am able to upload a .mp4 file to the server.
 2. I am trying to download the .mp4 using mobile application in iPad.

***

 - The Admin application is made by using asp.net 4.0 and SQL Server, IIS7.
 - The Mobile application is made of asp.net mvc3, jquerymobile, HTML5.

As of now I have added mime type `video/mp4` for .mp4 in IIS7 mime types section.

When I am trying to download the .mp4 file in iPad I am seeing a dark black screen with cross arrow on it. Can anyone please help me to resolve the issue.

Please tell me whether the mime type `video/mp4` for .mp4 is correct.

Correct mime type for .mp4

Is there a way to set thumbnail image on HTML5 video?
I want to see some pictures before play.
My code looks like this:

    &lt;video width=&quot;470&quot; height=&quot;255&quot; controls&gt;
		&lt;source src=&quot;video.mp4&quot; type=&quot;video/mp4&quot;&gt;
		&lt;source src=&quot;video.ogg&quot; type=&quot;video/ogg&quot;&gt;
		&lt;source src=&quot;video.webm&quot; type=&quot;video/webm&quot;&gt;
		&lt;object data=&quot;video.mp4&quot; width=&quot;470&quot; height=&quot;255&quot;&gt;
		&lt;embed src=&quot;video.swf&quot; width=&quot;470&quot; height=&quot;255&quot;&gt;
		&lt;/object&gt;
	&lt;/video&gt;

Thanks!

How to set the thumbnail image on HTML5 video?

Is there a way to play a video fullscreen using the HTML5 `&lt;video&gt;` tag?

And if this is not possible, does anybody know if there is a reason for this decision?

Is there a way to make HTML5 video fullscreen?

I am trying to create an html5 web page in which there is a small video like 13s , I converted the flash version of this video into 3 format : .ogv using fireFogg , .webm using firefogg also and .mp4 using HandBrake application the html script I used in my page :
 
    &lt;video  width=&quot;800&quot; height=&quot;640&quot; loop preload=&quot;false&quot; autoplay  controls tabindex=&quot;0&quot;&gt;
      &lt;source src=&quot;xmasvideo/video.mp4&quot; type=&quot;video/mp4&quot; /&gt;
      &lt;source src=&quot;xmasvideo/M&amp;P-Xmas 2.ogv&quot; type=&quot;video/ogv&quot; /&gt;
      &lt;source type=&quot;video/webm&quot; src=&quot;xmasvideo/M&amp;P-Xmas.webm&quot; /&gt;
    &lt;/video&gt;
The video is working fine in Chrome and FireFox but not working at all neither in Safari on Desktop nor on iPhone or iPad , the output is simply a blank page that shows the controls of the the video tag but nothing is loaded

Note that the Safari version that I have supports HTML5 video



HTML5 Video tag not working in Safari , iPhone and iPad

I&#39;m trying to get the dimensions of a video of which I&#39;m overlaying onto a page with JavaScript, however it is returning the dimensions of the poster image instead of the actual video as it seems it&#39;s being calculated before the video is loaded.

HTML5 Video Dimensions

I need HTML5 video to start at certain point.  Let&#39;s say at time 50 seconds onward. 
  
I tried but its not working as expected. is there something i am doing wrong? 
  
Here is the code:  
  

   

       &lt;video id=&quot;vid1&quot; width=&quot;640&quot; height=&quot;360&quot;&gt;
           &lt;source src=&quot;file.webm&quot; type=&quot;video/webm&quot; /&gt; 
           Your browser does not support the video tag.
       &lt;/video&gt;
       &lt;script&gt;
           document.getElementById(&#39;vid1&#39;).currentTime = 50;
       &lt;/script&gt; 

 
  

When the page loads, it just starts playing from beginning. 
However if I call this during playback like after some time, it works fine. 
Is there anything I am missing?

Start HTML5 video at a particular position when loading?

I&#39;m looking to place a video in an HTML5 page that will begin playing on page-load, and once completed, loop back to the beginning without a break. The video should also **NOT** have any controls associated with it, and either be compatible with all &#39;modern&#39; browsers, or have the option of a polyfill.

Previously I would have done this via `Flash` and `FLVPlayback`, but I would prefer to steer clear of `Flash` in the HTML5 sphere. I&#39;m thinking I could use javascript&#39;s `setTimeout` to create a smooth loop, but what should I use to embed the video itself? Is there something out there that will stream the video the way `FLVPlayback` would?

Play infinitely looping video on-load in HTML5

Does anyone know how to resize the HTML5 video poster such that it fits the exact dimensions of the video itself?

here&#39;s a jsfiddle which shows the problem: http://jsfiddle.net/zPacg/7/

here&#39;s that code:

HTML:

    &lt;video controls width=&quot;100%&quot; height=&quot;100%&quot;  poster=&quot;http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png&quot;&gt;
      &lt;source src=&quot;http://demo.inwebson.com/html5-video/iceage4.mp4&quot; type=&quot;video/mp4&quot; /&gt;
      &lt;source src=&quot;http://demo.inwebson.com/html5-video/iceage4.ogg&quot; type=&quot;video/ogg&quot; /&gt;
      &lt;source src=&quot;http://demo.inwebson.com/html5-video/iceage4.webm&quot; type=&quot;video/webm&quot; /&gt;
    &lt;/video&gt;​

CSS:

    video{
    border:1px solid red;
    }​

Notice that the orange rectangle doesn&#39;t scale to the red border of the video.

Also, just adding the CSS below doesn&#39;t work either as it rescales the video along with the poster:

    video[poster]{
	height:100%;
	width:100%;
    }

Make HTML5 video poster be same size as video itself

I see that the [MediaElement](http://www.w3.org/TR/html5/video.html#htmlmediaelement) interface exposes attributes like `paused`, `seeking`, and `ended`. Missing from the list, however, is `playing`.

I know there are [`playing` events](http://www.w3.org/TR/html5/video.html#event-media-playing) that fire when an element _starts_ playing, and [`timeupdate` events](http://www.w3.org/TR/html5/video.html#event-media-timeupdate) events periodically while playing, but I&#39;m looking for a way to determine whether a video is playing _right now_. Is there an easy way to determine this?

The closest I&#39;ve got is:

    !(video.paused || video.ended || video.seeking || video.readyState &lt; video.HAVE_FUTURE_DATA)

How to tell if a &lt;video&gt; element is currently playing?

Well, I&#39;ve been searching few days already, how to display HTML5 video in full-screen mode on android WebView.

I managed to play HTML5 videos on my webview. Problems are arising when displaying video in fullscreen mode.

As I figured out, android has two ways of handling the &lt; video &gt; tag:

1. &lt;b&gt;On android versions &lt;= 2.3.3&lt;/b&gt;, the onShowCustomView method is fired, and I can have the VideoView instance, and set listeners when the video completes, set controllers etc. So far so good.

2. &lt;b&gt;On ICS (and probably 3.0 and above)&lt;/b&gt;, it looks like the &lt; video &gt; is handled in different way. When the HTML5 video is played the onShowCustomView isn&#39;t being called on normal mode - it looks like there is an internal business inside the WebView that plays the video, and all the controls that are defined in the &lt; video &gt; tag are shown - I can&#39;t access it in any way. Actually, if the video is played in normal mode this is OK because the controls are there and are working.

That led me to the big problem: when displaying the video in full screen mode the onShowCustomView is being called - but on ICS the &quot;view&quot; parameter isn&#39;t an instance of VideoView.

I managed to find out that the instance is of VideoSurfaceView, a private inner class of HTML5VideoFullScreen class. The only way we can access this inner-class is via reflection.

After looking at GrepCode for this class, I learnt that unlike VideoView, the HTML5VideoFullScreen$VideoSurfaceView doesn&#39;t hold a MediaPlayer instance that I can listen to its events or access its controls. The only thing I can do is take this VideoSurfaceView as it is and put it inside a full-screen-layout without controlling it.

Bottom line - When displaying video in full-screen, I don&#39;t know when the video ends, its controls aren&#39;t shown - this is pretty sad. I can&#39;t get the trigger for closing the full-screen.

I tried few unsuccessful workarounds:

1. Reflection: I tried to reach the HTML5VideoFullScreen instance, which holds a MediaPlayer member, from the inner-class VideoSurfaceView. I didn&#39;t manage to get it, I&#39;m not sure this is possible (ViewSurfaceView doesn&#39;t hold its owner&#39;s instance).

2. Register for the video events via Javascript (onended, for example), and handle what I need back in JAVA via JavascriptInterface: I found this solution isn&#39;t reliable because while doing this I encountered another problem: the &lt; video &gt; tag can be nested in an &lt;iframe&gt;. The iframe source isn&#39;t mine and I can&#39;t get its content (getElementById or getElementsByTagName[i] are nulls) - which means, I can&#39;t reach the &lt; video &gt; element inside the iframe.

I&#39;m still searching for a solution, very little is written about this issue. Did anyone manage to solve it? Help would be much appreciated!

&lt;b&gt;VideoView&lt;/b&gt; class: [Here][1] (has MediaPlayer)

&lt;b&gt;HTML5VideoFullScreen$VideoSurfaceView&lt;/b&gt; class: [Here][2] (doesn&#39;t have MediaPlayer)



  [1]: http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/4.2.2_r1/android/widget/VideoView.java/
  [2]: http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/4.0.1_r1/android/webkit/HTML5VideoFullScreen.java

Playing HTML5 video on fullscreen in android webview

I want to achieve the following.

    &lt;video src=&quot;file:///Users/username/folder/video.webm&quot;&gt;
    &lt;/video&gt;

The intent is that the user will be able to select a file from his/her hard drive.

And the reason for not uploading is of course transmission costs and storage quota. There will be no reason to save the file.

Is it possible?

Play local (hard-drive) video file with HTML5 video tag?

I&#39;ve looked through a couple of questions to find out if an HTML5 element is playing, but can&#39;t find the answer. I&#39;ve looked at the W3 documentation and it has an event named &quot;playing&quot; but I can&#39;t seem to get it to work.

This is my current code:

    var stream = document.getElementsByTagName(&#39;video&#39;);
    
    function pauseStream() {
      if (stream.playing) {
        for (var i = 0; i &lt; stream.length; i++) {
          stream[i].pause();
          $(&quot;body &gt; header&quot;).addClass(&quot;paused_note&quot;);
          $(&quot;.paused_note&quot;).text(&quot;Stream Paused&quot;);
          $(&#39;.paused_note&#39;).css(&quot;opacity&quot;, &quot;1&quot;);
        }
      }
    }

Detect if HTML5 Video element is playing

For school I need to set up an HTML5 live stream site. They have a flash stream-player they&#39;ve been using but now they want it to use HTML5 instead. How can I do this? I tried using the video tag but I can&#39;t get it working. Below is the code I have. Could someone point me in the correct direction?

    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;title&gt;Deltion Live Streaming&lt;/title&gt;
        &lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;../swfobject.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    
    &lt;body&gt;	
    		
    	&lt;video id=&quot;movie&quot; width=&quot;460&quot; height=&quot;306&quot; preload autoplay&gt;
    		&lt;source src=&quot;rtmp://fl2.sz.xlcdn.com:80/sz=Deltion_College=lb1&quot;  type=&#39;video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;&#39;&gt;
    		    &lt;!-- HERE THE CODE FOR THE ALTERNATIVE PLAYER (FLASH) WILL BE! --&gt;
    	&lt;/video&gt;
    &lt;/body&gt;
    &lt;/html&gt;

HTML5 live streaming

I have a video as a background to a web page, and I am trying to get it to loop. Here is the code:

    &lt;video autoplay=&#39;true&#39; loop=&#39;true&#39; muted=&#39;true&#39;&gt;
      &lt;source src=&#39;/admin/wallpapers/linked/4ebc66e899727777b400003c&#39; type=&#39;video/mp4&#39;&gt;&lt;/source&gt;
    &lt;/video&gt;

Even though I have told the video to loop, it does not. I also tried to get it to loop with the `onended` attribute (as per [this Mozilla support thread](http://support.mozilla.com/en-US/questions/747220), I also tried that bit of jQuery). Nothing has worked so far. Is it an issue with Chrome, or my code?

**Edit:**

I checked the Network events and HEAD of a working copy (http://fhsclock-labs.heroku.com/no-violence) versus the application I&#39;m trying to get working. The difference is the working copy is serving up the video from a static asset on Heroku (via Varnish, apparently), whilst mine is serving from GridFS (MongoDB). 

The Network tab of Chrome&#39;s Inspector show that in my application, the video is requested three times. One time the Status is &quot;pending&quot;, the second is &quot;canceled&quot;, and the final one is 200 OK. The working copy only shows two requests, one&#39;s Status is pending and the other is 206 Partial Content. However, after the video plays once, that request changes to &quot;Cancelled&quot; and it makes another request for that video. In my application, that does not happen.

As for Type, in my application, two are &quot;undefined&quot; and the other &quot;video/mp4&quot; (which it is supposed to be). In the working app, all of the requests are &quot;video/mp4&quot;.

In addition, I&#39;m getting `Resource interpreted as Other but transferred with MIME type undefined.` warnings in the Console.

I&#39;m not really quite sure where to begin on this. It&#39;s my belief that the issue is server-side, as serving the file as static assets works fine. It could be that the server isn&#39;t sending the correct content type. It could be an issue with GridFS. I do not know.

At any rate, the source is [here](http://github.com/eturk/fhsclock). Any insight that you can offer is appreciated.

HTML5 video will not loop

I&#39;m looking for a way to view HTML5 `&lt;video&gt;`, frame-by-frame.

The scenario: Having a video, with an additional button that skips to the next frame when pressed.

What do you think is the best method to do this?

 1. Play the video normally, [Listen to `timeUpdate` event, which on FireFox is called for every frame][1], and then just pause the video. However, the other browsers don&#39;t behave like Firefox.
 2. Change the `currentTime` element manually to +1/24 of a second, where &quot;24&quot; is the frame rate. I have no idea how to aquire the FPS, however.
 3. Any other helpful way you can think of.

----------

## EDIT ##

I have found [this very useful HTML5 &lt;video&gt; test page](http://www.inconduit.com/smpte/), which tracks all browsers&#39; ability to achieve accurate frame-seeking.

  [1]: http://stackoverflow.com/q/3688177/207894

HTML5 frame-by-frame viewing / frame-seeking?

I&#39;ve got a local video file (an .avi, but could be converted) that I would like to show a client (ie it is private and can&#39;t be published to the web), but I can&#39;t figure out how to play it in IPython notebook. 

After a little Googling it seems that maybe the HTML5 video tag is the way to go, but I don&#39;t know any html and can&#39;t get it to play.

Any thoughts on how I can embed this?

How can I play a local video in my IPython notebook?

I am trying to use HTTP Live Streaming (HLS) to stream video to my computers and my iPhone.  After reading through the Apple &#39;HTTP Live Streaming Overview&#39; as well as &#39;Best Practices for Creating and Deploying HTTP Live Streaming Media for the iPhone and iPad&#39;, I am a bit stuck.

I took my source file (an mkv) and used ffmpeg to encode the file the MPEG-TS format and Apple-recommended settings and a Baseline 3.0 profile:

    ffmpeg -i &quot;example.mkv&quot; -f mpegts -threads:v 4 -sws_flags bicubic -vf &quot;scale=640:352,setdar=16/9,ass=sub.ass&quot; -codec:v libx264 -r 29.970 -b:v 1200k -profile:v baseline -level:v 3.0 -movflags faststart -coder 1 -flags +loop -cmp chroma -partitions +parti8x8+parti4x4+partp8x8+partb8x8 -me_method hex -subq 6 -me_range 16 -g 239 -keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -b_strategy 1 -qcomp 0.6 -qmin 10 -qmax 51 -qdiff 4 -direct-pred 1 -fast-pskip 1 -af &quot;aresample=48000&quot; -codec:a libvo_aacenc -b:a 96k -ac 2  -y &quot;output.ts&quot;

No worries there.  I used a [pre-compiled segmenting tool][1] to segment the video and build a .m3u8 playlist.  The resultant file looked like this:

    #EXTM3U
    #EXT-X-TARGETDURATION:10
    #EXTINF:10,
    http://localhost/media/stream/stream-1.ts
    #EXTINF:10,
    http://localhost/media/stream/stream-2.ts
    #EXTINF:10,
    http://localhost/media/stream/stream-3.ts
    #EXT-X-ENDLIST

I checked that against some [Example Playlist Files for use with HTTP Live Streaming][2], and I don&#39;t see any issues.  I also tried playing the .m3u8 file in VLC, and it works like a charm.

I created an HTML page to play the file:

    &lt;html lang=&quot;en&quot;&gt;
    	&lt;head&gt;
    		&lt;meta charset=utf-8/&gt;
    	&lt;/head&gt;
    	&lt;body&gt;
    		&lt;div id=&#39;player&#39;&gt;
    			&lt;video width=&quot;352&quot; height=&quot;288&quot; src=&quot;stream.m3u8&quot; controls autoplay&gt;
    			&lt;/video&gt;
    		&lt;/div&gt;
    	&lt;/body&gt;
    &lt;/html&gt;

And this page does not work in Chrome, Safari, on my iPhone.  The html5 video tag examples on w3schools work fine on my computer, and the official Apple overview mentioned above gives an HTML example very similar to my page.  Nevertheless, my video player is completely unresponsive when I visit my own .m3u8 page.



  [1]: https://code.google.com/p/httpsegmenter/
  [2]: https://developer.apple.com/library/ios/technotes/tn2288/_index.html

Playing m3u8 Files with HTML Video Tag

Google Chrome is now shipping with a download button for videos that are just embedded videos (i.e. not MSE):

![Canary Controls](http://i.imgur.com/tIris6n.png)

I&#39;m having a hard time find any documentation for Chrome&#39;s implementation of the `&lt;video&gt;` tag. Does anyone know if there is a way - short of disabling &quot;controls&quot; and creating your own video player controls - of disabling this feature?

I realize that if this is showing, it&#39;s already easy to download the video, I just want to disable that functionality from appearing as part of the controls. 

Thank you! 

Disable download button for Google Chrome?

I&#39;ve got a html5 video element on a modal window.  When I close the window the video continues to play.  I&#39;m a total newbie to JS.  Is there an easy way to tie a video playback stop function to the window close button?  Below is my html page:

    &lt;!DOCTYPE html &gt;
    &lt;html lang=&quot;en&quot;&gt;

    &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;title&gt;Modal Test&lt;/title&gt;

    &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;

    &lt;/script&gt;

    &lt;script type=&quot;text/javascript&quot;&gt;
    	$(document).ready(function(){
    		$(&quot;#showSimpleModal&quot;).click(function() {
    			$(&quot;div#simpleModal&quot;).addClass(&quot;show&quot;);
    			return false;	
    		});
    		
    		$(&quot;#closeSimple&quot;).click(function() {
    			$(&quot;div#simpleModal&quot;).removeClass(&quot;show&quot;);
    			return false;    				
    		});
    	});
    &lt;/script&gt;
    
    &lt;style type=&quot;text/css&quot;&gt;
    
    div#simpleModal
    {
    	position:absolute; 
        top: 40px; 
        width: 320px; 
        left: 170px; 
        border: solid 1px #bbb;     
        padding: 20px; 
        background: #fff; 
        -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25); 
        opacity: 0.0; 
        -webkit-transition: opacity 0.0s ease-out; z-index: 0;
    }
    	
    div#simpleModal.show
    {
    	opacity: 1.0; 
        z-index: 100;        
        -webkit-transition-duration: 0.25s; 
    }
    	
    &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;

    &lt;a href=&quot;&quot; id=&quot;showSimpleModal&quot;&gt;Show Modal&lt;/a&gt;
    
    &lt;div id=&quot;simpleModal&quot; class=&quot;modal&quot;&gt;
    &lt;video width=&quot;320&quot;  height=&quot;240&quot; src=&quot;Davis_5109iPadFig3.m4v&quot; controls=&quot;controls&quot;&gt; &lt;/video&gt;
    &lt;a href=&quot;&quot; id=&quot;closeSimple&quot;&gt;Close&lt;/a&gt;
    &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;

Any input greatly appreciated.

Thanks.


Javascript to stop HTML5 video playback on modal window close

I&#39;m wondering if there&#39;s any straightforward way to achieve this effect, without needing backend code to extract a frame, save it as a jpg and database it somewhere.

An effect whereby the first frame of the video just shows up as the poster when the video loads would be so helpful (it would only work if the browser can play back the video obviously, which might be a little different from how `poster` traditionally works, but that is not a concern.

Dynamically using the first frame as poster in HTML5 video?

I have a video, and I want it to FILL 100% of the width, and 100% of the height. And keep the aspect ratio.

Is it possible that it at least fills 100% for both? And if a bit of the video has to be out of the screen to keep the aspect ratio, that doesn&#39;t matter.


HTML:

        &lt;video preload=&quot;auto&quot; class=&quot;videot&quot; id=&quot;videot&quot; height=&quot;100%&quot; preload&gt;
        &lt;source src=&quot;BESTANDEN/video/tible.mp4&quot; type=&quot;video/mp4&quot; &gt;
        &lt;object data=&quot;BESTANDEN/video/tible.mp4&quot; height=&quot;1080&quot;&gt;
            &lt;param name=&quot;wmode&quot; value=&quot;transparent&quot;&gt;
            &lt;param name=&quot;autoplay&quot; value=&quot;false&quot; &gt;
            &lt;param name=&quot;loop&quot; value=&quot;false&quot; &gt;
        &lt;/object&gt;
CSS:

     .videof, .videot {
	    width: 100%    !important;
        height: 100%   !important;
     }

Video 100% width and height

I have the following code:

    &lt;video controls autoplay&gt;
      &lt;source src=&quot;video/myVideo.mp4&quot; type=&quot;video/mp4&quot;&gt; 
      &lt;source src=&quot;video/myVideo.webm&quot; type=&quot;video/webm&quot;&gt;
      &lt;source src=&quot;video/myVideo.ogv&quot; type=&quot;video/ogg&quot;&gt;   &lt;/video&gt;

The video:

1. displays well in both Chrome and Firefox
2. In Firefox it plays as expected
3. In Chrome it displays but not &quot;autostarts&quot;. This is the problem.
4. If I click on it (in Chrome) it plays ok

Tried

    &lt;video controls autoplay&gt;...&lt;/video&gt;
    &lt;video controls autoplay=&quot;1&quot;&gt;...&lt;/video&gt;
    &lt;video controls autoplay=&quot;autoplay&quot;&gt;...&lt;/video&gt;

Nothing worked in Chrome

Then I also tried changing the codec, as recommended in https://en.wikipedia.org/wiki/HTML5_video, but it also did not work:

    &lt;source src=&quot;movie.webm&quot; type=&#39;video/webm; codecs=&quot;vp8.0, vorbis&quot;&#39;&gt;
    	&lt;source src=&quot;movie.ogv&quot; type=&#39;video/ogg; codecs=&quot;theora, vorbis&quot;&#39;&gt;
    	&lt;source src=&quot;movie.mp4&quot; type=&#39;video/mp4; codecs=&quot;avc1.4D401E, mp4a.40.2&quot;&#39;&gt;

So now I am at a dead end. Thanks for any pointers! Much appreciated.

HTML 5 Video &quot;autoplay&quot; not automatically starting in CHROME

In one of my module, I need to browse video from input[type=&#39;file&#39;], after that I need to show selected video before starting upload.

I am using basic HTML tag &lt;video&gt;&lt;/video&gt; to show. but it is not working.

Here is code:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-js --&gt;

    $(document).on(&quot;change&quot;,&quot;.file_multi_video&quot;,function(evt){
      
      var this_ = $(this).parent();
      var dataid = $(this).attr(&#39;data-id&#39;);
      var files = !!this.files ? this.files : [];
      if (!files.length || !window.FileReader) return; 
      
      if (/^video/.test( files[0].type)){ // only video file
        var reader = new FileReader(); // instance of the FileReader
        reader.readAsDataURL(files[0]); // read the local file
        reader.onloadend = function(){ // set video data as background of div
              
              var video = document.getElementById(&#39;video_here&#39;);
              video.src = this.result;
          }
       }
      
    });

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;

    &lt;video width=&quot;400&quot; controls &gt;
                  &lt;source src=&quot;mov_bbb.mp4&quot; id=&quot;video_here&quot;&gt;
                Your browser does not support HTML5 video.
              &lt;/video&gt;


     &lt;input type=&quot;file&quot; name=&quot;file[]&quot; class=&quot;file_multi_video&quot; accept=&quot;video/*&quot;&gt;

&lt;!-- end snippet --&gt;



How can I set preview of video file, selecting from input type=&#39;file&#39;

I have several html5 videos on one page and I&#39;ve just realized that when you visit the page, all the videos start loading even though I haven&#39;t clicked play on any of them.

Is there a way to only load a video once you click play, to prevent unnecessary downloading? 

How to prevent html5 video from loading before playing?

I want to use a video as a background instead of an image that automatically stretches to the whole screen (background).


I would also like to rotate videos and images.. so that there is a random video/image displayed in any order.

It would also be nice to know how to delay video playback, so that the video only plays once 30 seconds after the site loaded.


thx!

video as site background? HTML 5

I am looking for a way to show or hide HTML5 video controls at will via javascript. The controls are currently only visible when the video starts to play

Is there a way to do this with the native video controls?

I&#39;m using google chrome browser.


HTML5 video - show/hide controls programmatically

We filmed a spokesperson on a green screen and have the video files ready in multiple formats. 

With Flash we could use the wmode transparent within the param and embed tags, but is there something similar to this with the video and source tags in HTML5? Is it even possible to properly save .m4v or .ogv videos so that we can play these files with transparent backgrounds on our browsers?

Thanks

Can I have a video with transparent background using HTML5 video tag?

Is it possible to seek to a particular point in `html5 video` displayed in a web page? I mean ,can I  input a particular time value (say `01:20:30:045` ) and have the player control (slider) move to that point and play from that point onwards?

In older version of mozilla `vlcplugin` I think this is possible by `seek(seconds,is_relative)` method..but I would like to know if this is possible in html video.

**Edit:**

I created the page with video and added javascript as below.When I click on the link ,it displays the time of click..but it doesn&#39;t increment the play location..but continues to play normally.

Shouldn&#39;t the video play location get changed?

html

    &lt;video id=&quot;vid&quot; width=&quot;640&quot; height=&quot;360&quot; controls&gt;
           &lt;source src=&quot;/myvid/test.mp4&quot; type=&quot;video/mp4&quot; /&gt; 
    &lt;/video&gt;
    &lt;a id=&quot;gettime&quot; href=&quot;#&quot;&gt;time&lt;/a&gt;
    &lt;p&gt;
    you clicked at:&lt;span id=&quot;showtime&quot;&gt; &lt;/span&gt; 
    &lt;/p&gt;

javascript

    $(document).ready(function(){
        var player = $(&#39;#vid&#39;).get(0);
        $(&#39;#gettime&#39;).click(function(){
                if(player){
                    current_time=player.currentTime;
                    $(&#39;#showtime&#39;).html(current_time+&quot; seconds&quot;);
                    player.currentTime=current_time+10;
                }
            });
    }
    );


seek to a point in html5 video

I want to play .mov video like as this, but video doesn&#39;t play in any browser.

  

    &lt;video width=&quot;400&quot; controls Autoplay=autoplay&gt;
      &lt;source src=&quot;D:/mov1.mov&quot; type=&quot;video/mov&quot;&gt;
    &lt;/video&gt;

   


How to open .mov format video in HTML video Tag?

I am working on building a HTML5 video player with a custom interface, but I am having some problems getting the video duration information to display.

My HTML is simple:

    &lt;video id=&quot;video&quot; poster=&quot;image.jpg&quot; controls&gt;     
	    &lt;source src=&quot;video_path.mp4&quot; type=&quot;video/mp4&quot; /&gt;
        &lt;source src=&quot;video_path.ogv&quot; type=&quot;video/ogg&quot; /&gt; 
    &lt;/video&gt;
    &lt;ul class=&quot;controls&quot;&gt; 
    &lt;li class=&quot;time&quot;&gt;&lt;p&gt;&lt;span id=&quot;timer&quot;&gt;0&lt;/span&gt; of &lt;span id=&quot;duration&quot;&gt;0&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;  
    &lt;/ul&gt;

And the javascript I am using to get and insert the duration is

    var duration = $(&#39;#duration&#39;).get(0);
    var vid_duration = Math.round(video.duration);
    duration.firstChild.nodeValue = vid_duration;

The problem is nothing happens. I know the video file has the duration data because if I just use the default controls, it displays fine.

But the real strange thing is if I put alert(duration) in my code like so

    alert(duration);
    var vid_duration = Math.round(video.duration);
    duration.firstChild.nodeValue = vid_duration;

then it works fine (minus the annoying alert that pops up). Any ideas what is happening here or how I can fix it?

 
UPDATE: Ok so although I haven&#39;t solved this problem exactly, but I did figure out a work around that handles my biggest concern... the user experience.

First the video doesn&#39;t begin loading until after the viewer hits the play button, so I am assuming that the duration information wasn&#39;t available to be pulled (I don&#39;t know how to fix this particular issue... although I assume that it would involve just loading the video metadata separately from the video, but I don&#39;t even know if that is possible).

So to get around the fact that there is no duration data, I decided to hide the duration info (and actually the entire control) completely until you hit play.

That said, if anyone knows how to load the video metadata separately from the video file, please share. I think that should completely solve this problem.





Retrieving HTML5 video duration separately from the file

I have a video tag, that I dynamically change its source as I am letting the user to choose from a number of videos from the database. The problem is that when I change the src attribute the video doesn&#39;t load even if I tell it to.

Here is my code:

    $(&quot;#video&quot;).attr(&#39;src&#39;, &#39;my_video_&#39;+value+&#39;.ogg&#39;);
    $(&quot;#video&quot;).load();
	while($(&quot;#video&quot;).readyState !== 4) {
    		console.log(&quot;Video is not ready&quot;);
    };

The code still stays in a infinite loop.

Any help?

**EDIT**:

To Ian Devlin:

    //add an listener on loaded metadata
    v.addEventListener(&#39;loadeddata&#39;, function() {
        console.log(&quot;Loaded the video&#39;s data!&quot;);
        console.log(&quot;Video Source: &quot;+ $(&#39;#video&#39;).attr(&#39;src&#39;));
        console.log(&quot;Video Duration: &quot;+ $(&#39;#video&#39;).duration);
    }, false);

Ok this is the code I have now. The source prints great, but I still can&#39;t get the duration :/


All Html5 Video Solutions on Gang of Coders

Total of 39 Html5 Video Solutions