vue.js does not support the <video> ?

[HuanMeng0]

PHP framework : Lumen

If I write it , it will not load the video:

<div id="app">
    <div class="plyr">
        <video controls preload="none">
            <source :src="videourl" type="video/mp4">
        </video>
    </div>
</div>

If I do not use ": src", with the "src":

   <source src="@{{ videourl }}" type="video/mp4">

Console displays:

vue.js:1018 [Vue warn]: src="{{ videourl  }}": interpolation in "src" attribute will cause a 404 request. Use v-bind:src instead.

I should in the end how to do?

[HuanMeng0]

I use "template" to resolve this problem.

[HuanMeng0]

http://forum.vuejs.org/topic/4019/vue-js%E4%B8%8D%E6%94%AF%E6%8C%81html5%E7%9A%84video%E6%A0%87%E7%AD%BE

[Wanderxx]

Don't tell me writing in template is the only way

[posva]

Do <source :src="videourl" type="video/mp4"> don't use interpolation inside attributes, otherwise the browser will try to fetch before Vue even changes it

[raychenfj]

I write like this and it works
<source v-if="src" :src="src" :type="type">

[AlwaysSkylll]

@raychenfj It works

[benjarwar]

I'm testing the muted attribute, and it seems that Vue doesn't render to the DOM when binding against data/computed values, e.g.:

<video :muted="isMuted" />

With the same underlying data, I got this to work:

<video :foo="isMuted" />

cc @posva

[mimoo]

what about the error="" which is different from onerror="" for the source tag?

[okaychen]

@raychenfj Pretty good

[intijk]

@raychenfj you provided the most elegant solution !

[mmuflih]

@raychenfj Cool

[tetreault]

Wanted to chime in with my (similar) solution. I'm using the Nuxt framework for Vue. Setting MediaStream thru Vuex didn't work for me using :src="" or :srcObject="". The state of the webcam being on is initiated thru a button click in a non-child component and I needed to set the mediastream for the video object in this other component.

In the method that runs when you click the button to toggle my view, as well as kick off navigator.mediaDevices I ended up doing this (probably not the cleanest?).

    let constraints = (window.constraints = {
            audio: false,
            video: {
              facingMode: "user"
            }
          });
    
          navigator.mediaDevices
            .getUserMedia(constraints)
            .then((stream) => {
              let videoTracks = stream.getVideoTracks();

              stream.oninactive = function() {
                if (this.$store.state.debug) console.log("Stream inactive");
              };

              // NOTE: this is done this way because I couldnt set it via Vuex state
              document.getElementById('user-media__source').srcObject = stream;
            })
            .catch((error) => {
               if (this.$store.state.debug) console.log(`${error}`);
            });

So since my component I need to set the source in is already created/mounted I just fired of the usual document.getElementById('XXXX').srcObject = and it worked like I wanted.