aframevr / aframe

:a: Web framework for building virtual reality experiences.
https://aframe.io/
MIT License
16.69k stars 3.98k forks source link

Video autoplays even without attribute #2368

Open mikedijkstra opened 7 years ago

mikedijkstra commented 7 years ago

The following code will autoplay the video when it shouldn't:

        <a-scene>
            <a-assets>
                <video id="video" src="video/Video.mp4" webkit-playsinline>
            </a-assets>

            <a-camera position="0 7 5">
                <a-cursor color="#FF0000">
            </a-camera>

            <a-video src="#video" width="16" height="9" position="0 0 0"></a-video>
        </a-scene>
maissani commented 7 years ago

Hi @micdijkstra, The Default DOM behavior for

<video crossorigin="anonymous"
    preload="auto"
    autoplay="false"
    id="my-video-1"
    loop="true"
    webkit-playsinline
    playsinline controls muted>
    <source src="../assets/videos/big_buck_bunny.mp4" type="video/mp4"/>
</video>

Ps: Don't care about the format of declaration i take for video. I only write W3C compliant HTML.

In this example => autoplay="false"

You can play pause by playing or pausing a-video source like that: ( behind the wood, the texture rendered by a-video refers to video element. So if you play or pause on it, it will pause or play your a-video displayed texture and sound).

document.querySelector(document.querySelector('a-video').getAttribute('src')).play()
document.querySelector(document.querySelector('a-video').getAttribute('src')).pause()

Cordially, Mehdi AISSANI

mikedijkstra commented 7 years ago

Thanks for your reply @maissani.

The docs say that the format for a video is:

<a-assets>
    <video id="penguin-sledding" autoplay loop="true" src="penguin-sledding.mp4">
  </a-assets>

See: https://aframe.io/docs/0.5.0/primitives/a-video.html

When I use your format above, while it still loads the video I get the following console output: components:texture:warn Video element was defined without `src` nor `srcObject` attributes. +0ms

Either way, with either format using the latest version of AFrame, when I put autoplay="false" it still autoplays the video.

jbreckmckye commented 7 years ago

What browser are you testing in?

If you create a test page with just the video element (that is, without any aframe markup), how does the browser treat it? Does it autoplay there, too?

Video textures work by simply creating a video element, playing it and then capturing its output. It's the browser that actually plays and manipulates the video.

mikedijkstra commented 7 years ago

I'm using Chrome. I've created some examples to help show what I'm doing:

Here's a Codepen with no aframe and a video element that does not autoplay: http://codepen.io/anon/pen/aJdvpd?editors=1010

Here's a Codepen with aframe and the same video element as above that does autoplay: http://codepen.io/anon/pen/YZwyPN

Here's a Codepen with aframe using the formatting described in the docs (which is different to a normal HTML5 video element): http://codepen.io/anon/pen/dvGYzW

machenmusik commented 7 years ago

the code is from before me, but I think this is what is happening... https://github.com/aframevr/aframe/blob/master/src/systems/material.js#L326

@dmarcos @ngokevin is it intentional that fixing video attributes forces autoplay?

jfreehill commented 7 years ago

I'm having this same issue as I don't want the video to autoplay. The line mentioned by @machenmusik above should be removed, as having a check like that creates a self-fulfilling scenario. Simply having an autoplay attribute on the video element (e.g. with a string of false) will cause it to be true, so even if you don't set it at all on the video element, this check will give it a setting, thus making it true and autoplaying every time.

jbreckmckye commented 7 years ago

@jfreehill The behaviour you mention is consistent with the way <video> elements are supposed to work in the HTML5 spec. Even the attribute autoplay='false' will turn on autoplay - the behaviour is triggered or suppressed by whether or not an attribute exists, not by what its value is.

That said, there is a potential issue in the fixVideoAttributes function:

  videoEl.autoplay = videoEl.getAttribute('autoplay') !== 'false';
  videoEl.controls = videoEl.getAttribute('controls') !== 'false';

Won't the above set an autoplay = true attribute if the video element has no 'autoplay' attribute? The getAttribute query will return a null, which !== 'false'.

jfreehill commented 7 years ago

Perhaps my explanation was convoluted, but that's exactly what I was saying. The autoplay attribute will be set to true by line 327 regardless of whether or not you set it. If the browser is acting as intended, autoplay will never return a string of false when retrieved by getAttribute().