    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;body&gt;
    
    &lt;video width=&quot;320&quot; height=&quot;240&quot; controls=&quot;controls&quot; preload=&quot;none&quot;&gt;
      &lt;source src=&quot;movie.mp4&quot; type=&quot;video/mp4&quot; /&gt;
      &lt;source src=&quot;movie.ogg&quot; type=&quot;video/ogg&quot; /&gt;
      Your browser does not support the video tag.
    &lt;/video&gt;
    
    &lt;/body&gt;
    &lt;/html&gt;

Use Preload&quot;none&quot;

http://diveintohtml5.info/video.html

You should use the `preload` attribute, and set its value to `none`.

Quote from [the `&lt;video&gt;` specification][1]

&gt;`preload` = &quot;**none**&quot; or &quot;**metadata**&quot; or &quot;**auto**&quot; or &quot;&quot; (*empty string*) or empty  
Represents a hint to the UA about whether optimistic downloading of the video itself or its metadata is considered worthwhile.  
 - *&quot;**none**&quot;: Hints to the UA that the user is not expected to need the video, or that minimizing unnecessary traffic is desirable.* 

  [1]: http://www.w3.org/wiki/HTML/Elements/video#HTML_Attributes

Just use `&lt;video preload=&quot;none&quot;&gt;`

And if you want to load meta data only of video then use `&lt;video preload=&quot;metadata&quot;&gt;`

I want to control other application volume(firefox).

i can do it with `Volume Mixer`

![enter image description here][1]

What is the libraries of the `Volume Mixer`?


  [1]: https://i.stack.imgur.com/QzTN5.jpg

Controlling Volume Mixer

I&#39;m having a problem trying to ignore whitespace in-between certain characters. I&#39;ve been Googling around for a few days and can&#39;t seem to find the right solution.

Here&#39;s my code:

    // Get Image data
    preg_match(&#39;#&lt;a href=&quot;(.*?)&quot; title=&quot;(.*?)&quot;&gt;&lt;img alt=&quot;(.*?)&quot; src=&quot;(.*?)&quot;[\s*]width=&quot;150&quot;[\s*]height=&quot;(.*?)&quot;&gt;&lt;/a&gt;#&#39;, $data, $imagematch);
    $image = $imagematch[4];

Basically these are some of the scenarios I have:

     &lt;a href=&quot;/wiki/File:Sky1.png&quot; title=&quot;File:Sky1.png&quot;&gt;&lt;img alt=&quot;Sky1.png&quot; src=&quot;http://media-mcw.cursecdn.com/thumb/5/56/Sky1.png/150px-Sky1.png&quot;width=&quot;150&quot; height=&quot;84&quot;&gt;&lt;/a&gt;

(Notice the lack of a space between width=&quot;&quot; and src=&quot;&quot;)

And

    &lt;a href=&quot;/wiki/File:TallGrass.gif&quot; title=&quot;File:TallGrass.gif&quot;&gt;&lt;img alt=&quot;TallGrass.gif&quot; src=&quot;http://media-mcw.cursecdn.com/3/34/TallGrass.gif&quot; width=&quot;150&quot;height=&quot;150&quot;&gt;&lt;/a&gt;

(Notice the lack of a space in between width=&quot;&quot; and height=&quot;&quot;.)

Is there anyway to ignore the whitespace in between those characters? As I am not a Regex expert.


Optional Whitespace Regex

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?

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


What I want is for the green background to be just behind the text, not to be 100% of the page width. Here is my current code:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    h1 { 
        text-align: center; 
        background-color: green; 
    }

&lt;!-- language: lang-html --&gt;

    &lt;h1&gt;The Last Will and Testament of Eric Jones&lt;/h1&gt; 

&lt;!-- end snippet --&gt;



How do I set a background-color for the width of text, not the width of the entire element, using CSS?

I have a list of radio buttons. when I tab through them, seems like only the first radio button or the one that is selected will get focused, the rest of the radio buttons will get skipped.  checkbox didnt have this problem.

http://jsfiddle.net/2Bd32/

I have a hard time to explain to my QA this is not a bug.  can someone please explain to me why this happens.



	Soccer: &lt;input type=&quot;checkbox&quot; name=&quot;sports&quot; value=&quot;soccer&quot;  tabindex=&quot;1&quot; /&gt;&lt;br /&gt;
	Football: &lt;input type=&quot;checkbox&quot; name=&quot;sports&quot; value=&quot;football&quot;  tabindex=&quot;2&quot; /&gt;&lt;br /&gt; 

	&lt;input type=&quot;radio&quot; name=&quot;num&quot; value=&quot;3&quot; tabindex=&quot;3&quot;&gt;3&lt;br&gt;
	&lt;input type=&quot;radio&quot; name=&quot;num&quot; value=&quot;4&quot; tabindex=&quot;4&quot;&gt;4&lt;br&gt;
	&lt;input type=&quot;radio&quot; name=&quot;num&quot; value=&quot;5&quot; tabindex=&quot;5&quot;&gt;5&lt;br&gt;
	&lt;input type=&quot;radio&quot; name=&quot;num&quot; value=&quot;6&quot; tabindex=&quot;6&quot;&gt;6&lt;br&gt;
	&lt;input type=&quot;radio&quot; name=&quot;num&quot; value=&quot;7&quot; tabindex=&quot;7&quot;&gt;7&lt;br&gt;
	  
	Baseball: &lt;input type=&quot;checkbox&quot; name=&quot;sports&quot; value=&quot;baseball&quot;  tabindex=&quot;8&quot;  /&gt;&lt;br /&gt; 
	Basketball: &lt;input type=&quot;checkbox&quot; name=&quot;sports&quot; value=&quot;basketball&quot;  tabindex=&quot;9&quot;  /&gt;



Can you tab through all radio buttons?

&gt; **Possible Duplicate:**  
&gt; [Do you need text/javascript specified in your &amp;lt;script&amp;gt; tags?](https://stackoverflow.com/questions/5265202/do-you-need-text-javascript-specified-in-your-script-tags)  

&lt;!-- End of automatically inserted text --&gt;

Do in HTML5, the `&lt;script&gt;` tag need attribute `type=&quot;text/javascript&quot;`?  
I mean isn&#39;t it obvious if the `&lt;script&gt;` tag will be contains javascript?


Do HTML5 Script tag need type=&quot;javascript&quot;?

Let&#39;s say I have two divs, one inside the other, like so:

    &lt;html&gt;
      &lt;body&gt;
        &lt;div id=&quot;outer&quot; style=&quot;width:50%&quot;&gt;
          &lt;div id=&quot;inner&quot; style=&quot;width:100%&quot;&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/body&gt;
    &lt;/html&gt;

Right now, the inner div has a width of 100% of 50% of the screen size, or 50% of the screen size. If I were to change the inner div to position absolute, like this:

    &lt;html&gt;
      &lt;body&gt;
        &lt;div id=&quot;outer&quot; style=&quot;width:50%&quot;&gt;
          &lt;div id=&quot;inner&quot; style=&quot;position:absolute;width:100%&quot;&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/body&gt;
    &lt;/html&gt;

In this case the inner div takes up 100% of the screen space, because its position is set to absolute.

My question is this: Is there any way to maintain relative width of the inner div while its position is set to absolute?


Is there any way for &quot;position:absolute&quot; div to retain relative width?

I have a few HTML tables. These tables do not have CSS classes. The two tables have `width=&quot;100%&quot;` attribute. Other tables don&#39;t have the `width` attribute.

Using only CSS I need to set the width of the tables which don&#39;t have `width=100%`. Something like this:

    table:not(width=&quot;100%&quot;){
        width: myValue;
    }

CSS :Not attribute

I have searched the internet for days now on how to implement a video streaming feature from an android phone to another android phone over a WiFi connection but I can&#39;t seem to find anything useful. I looked on android developers for sample code, stackoverflow, google, android blogs but nothing. All I can find are some sort of phone-to-desktop or desktop-to-phone solutions for streaming, but nothing that I can borrow in my implementation. 

I need to control a robot using an arduino ADK, so I am using 2 phones, one which will be mounted on the robot and another which will receive the video stream from the robot. I am mentioning this because I am trying to achieve the smallest delay between the broadcast time and the viewing time.

I am writing 2 apps, one master app to control the robot(from the handheld phone) which will control the slave app and receive the stream, and the second slave app which will run on the robot-strapped phone, controlling the motors/actuators/streaming to master app. I can not use third party apps unfortunately. I need to integrate the video stream code into my 2 apps.

What options are there for achieving this? Also is it very hard to do because I never worked with videostreaming, tough I am doing pretty good in both Java and Android development. How should I encode/decode the stream, how do I initiate the connection, will I need to work with UDP instead of TCP/IP ? I really don&#39;t know where to start, with no sample code anywhere. I am pretty sure this can be achieved. I just can&#39;t find anything useful to get me started in the right direction.

I stumbled across [spydroid][1]  but it is using VLC on a desktop so its no good for me.

---
**EDIT:** Check out Cagney Moreau&#39;s [blog](http://cagneymoreau.com/stream-video-android/). He goes into details about implementing this.

  [1]: http://code.google.com/p/spydroid-ipcamera/

Live-stream video from one android phone to another over WiFi

Is that possible to make a video inside &lt;video&gt; tag mirrored horizontally or vertically?

Is that possible to make &lt;video&gt; mirrored?

I am trying to specify a specific video/audio codec in the video tag using

    &lt;video poster=&quot;movie.jpg&quot; controls&gt;
        &lt;source src=&quot;movie.mp4&quot; type=&#39;video/mp4; codecs=&quot;avc1.4D401E, mp4a.40.2&quot;&#39;/&gt;
        &lt;p&gt;This is fallback content&lt;/p&gt;
    &lt;/video&gt;

but can&#39;t find the right codecs statement to play the video , i have downloaded a video analyser and can see that its an avc1 and can see that the audio map.40.2 but can work out the rest of the codec, what does the 4d401e mean in the above ?

Cheers
Toby 

html5 video tag codecs attribute

**PROBLEM:**

WebRTC gives us peer-to-peer video/audio connections. It is perfect for p2p calls, hangouts. But what about broadcasting (one-to-many, for example, 1-to-10000)? 

Lets say we have a broadcaster &quot;B&quot; and two attendees &quot;A1&quot;, &quot;A2&quot;. Of course it seems to be solvable: we just connect B with A1 and then B with A2. So B sends video/audio stream directly to A1 and another stream to A2. B sends streams twice.

Now lets imagine there are 10000 attendees: A1, A2, ..., A10000. It means B must send 10000 streams. Each stream is ~40KB/s which means B needs 400MB/s outgoing internet speed to maintain this broadcast. Unacceptable.

**ORIGINAL QUESTION (OBSOLETE)**

Is it possible somehow to solve this, so B sends only one stream on some server and attendees just pull this stream from this server? Yes, this means the outgoing speed on this server must be high, but I can maintain it. 

Or maybe this means ruining WebRTC idea?

**NOTES**

Flash is not working for my needs as per poor UX for end customers.

**SOLUTION (NOT REALLY)**

26.05.2015 - There is no such a solution for scalable broadcasting for WebRTC at the moment, where you do not use media-servers at all. There are server-side solutions as well as hybrid (p2p + server-side depending on different conditions) on the market.

There are some promising techs though like https://github.com/muaz-khan/WebRTC-Scalable-Broadcast but they need to answer those possible issues: latency, overall network connection stability, scalability formula (they are not infinite-scalable probably).

**SUGGESTIONS**

 1. Decrease CPU/Bandwidth by tweaking both audio and video codecs;
 2. Get a media server.

WebRTC - scalable live stream broadcasting / multicasting

I tried to cut the video using the start and end time of the video by using the following command 

    ffmpeg -ss 00:00:03 -t 00:00:08 -i movie.mp4 -acodec copy -vcodec copy -async 1 cut.mp4

By using the above command i want to cut the video from `00:00:03` to `00:00:08`. But it is not cutting the video between those times instead of that it is cutting the video with first 11 seconds. can anyone help me how resolve this?

**Edit 1:**

I have tried to cut by using the following command which is suggested by [mark4o][1]

    ffmpeg -i movie.mp4 -ss 00:00:03 -t 00:00:08 -async 1 cut.mp4

But it was shown the following error.

  

 ***the encoder &#39;aac&#39; is experimental but experimental codecs are not enabled***

so i added the `-strict -2` into the command i.e.,

    ffmpeg -i movie.mp4 -ss 00:00:03 -t 00:00:08 -async 1 -strict -2 cut.mp4

Now it is working fine.

  [1]: https://stackoverflow.com/users/112212/mark4o

Cutting the videos based on start and end time using ffmpeg

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&#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

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?

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;
     }

Content Type	Original Author	Original Content on Stackoverflow
Question	Will Ryan	View Question on Stackoverflow
Solution 1 - Html	Timothy Radzikowski	View Answer on Stackoverflow
Solution 2 - Html	Gabriele Petrioli	View Answer on Stackoverflow
Solution 3 - Html	Harikrishna	View Answer on Stackoverflow

How to prevent html5 video from loading before playing?

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

Optional Whitespace Regex

Controlling Volume Mixer

Attributions