[whatwg] <video> element feedback

[Shadow2531]

On 3/20/07, Ian Hickson <ian at hixie.ch> wrote:
> On Wed, 21 Mar 2007, Lachlan Hunt wrote:
> > >
> > > I only included togglePause() because Flash supports it and some
> > > people asked for it; I'm not convinced we should keep it.
> >
> > I'm in favour of dropping it.  It's an unnecessary API for browsers to
> > support.  It adds nothing that can't be done with play()/pause() and an
> > if statement.
> >
> > if (video.state == HTMLVideoElement.PAUSED) {
> >     video.play();
> > } else {
> >     video.pause();
> > }
>
> On Tue, 20 Mar 2007, Jeff Cutsinger wrote:
> >
> > +1.
>
> I've commented it out for now. Let's see how many people complain.

No objections. Also +1.

> On Tue, 20 Mar 2007, Shadow2531 wrote:
> >
> > So, if one used <video src="200x200.ogg" style="width: 800px; height:
> > 800px;"></video> , there'd be no way to make the video display at 200 x
> > 200 because it would always scale?
>
> Currently, correct.

Thanks.

> > If so, if one wanted to simulate the look I'm describing, would one have
> > to do the following for example?
> >
> > <figure style="width: 800px; height: 800px; background: #000;">
> >    <video src="200x200.ogg" style="width: 200px; height: 200px;"></video>
> > </figure>
> >
> > (Just want to be sure.)
>
> Yeah, you could do that.

Thanks

> > I'm thinking more along the lines of a local HTML page that embeds a
> > local video (one of your favorites for example) where when you load the
> > page (via a bookmark or a panel for example), it automatically starts
> > and is set to loop (because you authored it that way).
>
> Well for local content we don't need to worry about interoperability
> (since the user makes it for himself on his user agent), so user agents
> are free to add vendor extensions to do this, or the user could use JS, or
> the user could do something that doesn't involve HTML at all, that's not
> really our problem.

Point taken.

> > So, this is all that is needed to do autostart?
> >
> > window.onload = function() {
> >    document.getElementsByTagName("video")[0].play();
> > };
>
> That will do it, yes, assuming the user agent doesn't block it (the spec
> allows that, under use control).

Thanks

> > > > However, if JS is needed for the video element to function at all,
> > > > then the video element needs to fall back if JS is turned off.
> > >
> > > Interesting point.
> >
> > Yes, since JS is required, if JS is off, the browser should display the
> > alternate content.
> >
> > > You can do this with JS, of course (and that's the preferred way; hide
> > > the fallback when you have JS).
> >
> > Are you saying that with JS on, the fallback content will be displayed
> > in addition to the video and you have to use JS to hide the fallback
> > content like the following?
> >
> > window.onload = function() {
> >    var x = document.getElementsByTagName("video")[0];
> >    x.play();
> >    x.innerHTML = "";
> > };
>
> No, I meant something like:
>
>    <section id="video">
>      <p>You need JavaScript turned on to do video.</p>
>    </section>
>    <script>
>      // clear the fallback
>      var v = document.getElementById('video');
>      while (v.hasChildNodes) v.removeChild(v.firstChild);
>
>      // get the data to play
>      var src = 'video.ogg';
>
>      // create the UI
>      default xml namespace = "http://www.w3.org/1999/xhtml";
>      var ui = <div>
>                 <p><video src={src}></video></p>
>                 <p>
>                  <input type="button" value="Play" onclick="vPlay()"/>
>                  <input type="button" value="Pause" onclick="vPause()"/>
>                 </p>
>               </div>;
>      var video = ui..video.domNode();
>      function vPlay() { video.play() }
>      function vPause() { video.pause() }
>      v.appendChild(ui.domNode());
>
>      // start playback
>      video.play();
>    </script>
>
> Or, probably better:
>
>    <section id="no-js-warning">
>      <p>You need JavaScript turned on to do video.</p>
>    </section>
>    <section id="video">
>      <p><video src="video.ogg"></p>
>      <p>
>        <input type="button" value="Play" onclick="vPlay()"/>
>        <input type="button" value="Pause" onclick="vPause()"/>
>      </p>
>    </section>
>    <script>
>      // clear the fallback
>      var f = document.getElementById('no-js-warning');
>      f.parentNode.removeChild(f);
>
>      // UI functions
>      function vPlay() { video.play() }
>      function vPause() { video.pause() }
>
>      // start playback
>      video.play();
>    </script>

Thanks. I'm all set on this now.

-- 
burnout426