What is the right way to create a hero background video in vue.js?
The following way doesn't work.
html:
<template>
<div id="hero">
<video playsinline autoplay muted loop poster="../assets/img/hero-1.jpg" id="bgvideo" width="1080" height="720">
<source :src="videoUrl" :type="videoType">
</video>
</div>
</template>
javascript:
<script>
export default {
name: 'SectionHome',
data() {
return {
videoUrl: '#/assets/videos/hero-1.mp4',
videoType: 'video/mp4'
}
},
};
</script>
I also tried to pass the file path directly to the html tag: <source src="#/assets/video.mp4" type="video/mp4">, but according to this issue this way doesn't work at all. By the way I have the same problem with vuetify <v-img ...>, passing local files doesn't work, whereby <img ...> does work.
To solve passing local files in Vuetify you just need to add require to your src
From Vuetify :
Vue loader converts relative paths into require functions automatically for you. Unfortunately, this is not the case when it comes to custom components. You can circumvent this issue by using require. If you're using Vuetify as a Vue-CLI 3 plugin, you can edit your project's vue.config.js file by modifying the options for vue-loader.
Incorrect
<v-img src="../path/to/img" />
Correct
<v-img :src="require('../path/to/img')" />
You can also do the same with <source :src="require('#/path/to/video')">
<video playsinline autoplay muted loop poster='#/assets/img/hero-1.jpg'>
<source :src='require("#/assets/videos/hero-1.mp4")' type='video/mp4'>
</video>
Related
I have added the following code as a section in the Shopify Debut Theme:
<div class="fullscreen-video-wrap
fullscreen-video-wrap--{{ section.settings.height }}
fullscreen-video-wrap--{{ section.id }}">
<video class="video-js" autoplay preload playsinline muted
poster="https:{{ section.settings.image | img_url: 'master' }} controlsList="nofullscreen">
<source src="{{ section.settings.newvideo_link }}" type="video/mp4">
</source>
</video>
</div>
as to include a MP4 video. However, if I change the code to something as simple as this:
<video class="video-js" autoplay preload playsinline muted
poster="https:{{ section.settings.image | img_url: 'master' }} controlsList="nofullscreen" onclick="alert("I am an alert box!");">
The alert button will not work. So I have been starting to debug, what is hijacking the onclick event using Chrome > Inspect > Sources and then breakpoint at the click event. I got the following:
I would like to know how to continue and how to resolve this issue? I am also not quite familiar with LazySizes and am wondering how I could make the "onclick" event work.
I have a video in which I want to disable fullscreen playing with html5 video tag in iPhone,
I tried different solution as suggested in StackOverflow but none seemed to solve the problem.
Here is my solution by adding playisinline=1
<video id="orange-video-1" class="videotag active" preload="auto" playsinline=1 webkit-playsinline=1 src="emptyvideo/emptyvideo.mp4" muted>
</video>
what do I need to change to get what I want?
Actually you don't need to set it to equal one. playsinline should work.
Try this instead:
<video id="orange-video-1" class="videotag active" preload="auto" webkit-playsinline playsinline src="emptyvideo/emptyvideo.mp4" muted>
</video>
Doing it from a jQuery view would also work:
// Sets the attribute, empty second parameter needed
// otherwise it would be a getter func
$('video').attr('webkit-playsinline', '');
$('video').attr('playsinline', '');
// Set the webview on iOS
webview.allowsInlineMediaPlayback = true;
If that doesn't work:
Reading Apple's documentation it appears you would use the following code since playisinline=1 works if the website is stored on the home page. Try this in your config file:
<preference name="AllowInlineMediaPlayback" value="true" />
I have a styled component that styles a video tag.
const Video = styled.video`
...
`
And I use it like so
<Video width='200px' height='200px' autoplay='autoplay' muted loop>
<source src={img.src} type='video/mp4' />
</Video>
But the autoplay attribute doesn't work and also doesn't show up when I inspect the element with Devtools. The other attributes like width, height and loop are visible.
However when I use a normal video tag, the autoplay works and it is seen when I inspect the element.
<video width='200px' height='200px' autoplay='autoplay' muted loop>
<source src={img.src} type='video/mp4' />
</video>
Any idea why the styled-component does not recognise the autoplay attribute?
try autoPlay instead of autoplay
<Video ... autoPlay />
reference:
'autoplay' attribute
If you are using NPM then add the react player dependencies
npm install react-player --save
If you are using yarn add react player dependencies
yarn add react-player
import the ReactPlayer component in index file
import ReactPlayer from 'react-player';
Now you can set
<YourComponent url='https://www.youtube.com/linkhere' playing />
Bydefault it is False.
You can set it as True in props or inside the condition.
I had a similar issue and thanks to the answers above I could solve it.
The video element seemed working with either autoPlay="autoPlay" or autoPlay, however I had to reload the page manually in order to make it work.
<Video
autoplay="autoplay" // not working
autoPlay="autoPlay" // working
autoPlay // working
autoplay // not working
muted
loop
>
<source src={DroneShot} type="video/mp4" />
</Video>
https://jsfiddle.net/kaldenfi/rpmk93wm/3/
<div ng-app="myApp" ng-controller="testCtrl">
<section ng-if="url">
<video id="player1" playsinline autoplay loop muted volume="0.0">
<source ng-src="{{url | trusturl}}" type="video/mp4"> Your browser does not support the video tag.
</video>
</section>
</div>
After updated to chrome 64, this is no longer muting my video. If i take the video outside of the ng-if and hardcode the url it works as it should
Any solutions?
Okay found a temporary solution, if I move the ng-if to the source tag, it mutes it correctly.
Chrome 64 must be doing something when the page first loads it's looking for any video tags, so if your video tag isn't there on load it won't run the muted tag
I had the same issue in an Ember application I am working on.
The 2 solutions I had:
move the <video> tag(s) to the index.html, like you similarly did
create a function that can be called on an init or window.onload hook
mutePlayer1VideoHack() {
const player1Video = document.getElementById('player1');
player1Video.setAttribute('muted', true);
}
I prepended the function name in #2 with Hack in the case this is a true Chrome 64 bug that will be fixed. I am going with solution #1 for my case
I have an HTML 5 video inside my page and I would like to set the src dynamically.
I'm using vue, inside my js controller I set a variable with the video path then I use the variable in my page as below:
<video width="450" controls>
<source v-model="controller.var" v-bind:src="var" type="video/mp4">
</video>
The player doesn't load the video but my var is properly set with the right url.
What I'm missing here?
Thanks
Adding the key attribute with the source's URL to the video element will cause both video and source to be updated when the URL changes:
<video
:key="video.mp4"
width="450"
controls
>
<source
:src="video.mp4"
type="video/mp4"
>
</video>
This supports dynamic replacement of a video + source.
First, I don't know if you are actually using var in your template, but if you are, Vue will throw a warning in the template.
avoid using JavaScript keyword as property name: "var" in expression :src="var"
Second, you cannot dynamically change the source element.
From the HTML5 specification,
Dynamically modifying a source element and its attribute when the
element is already inserted in a video or audio element will have no
effect. To change what is playing, just use the src attribute on the
media element directly, possibly making use of the canPlayType()
method to pick from amongst available resources. Generally,
manipulating source elements manually after the document has been
parsed is an unnecessarily complicated approach.
So, bind your data to the src attribute of the video element.
<video width="450" controls :src="video"></video>
console.clear()
new Vue({
el:"#app",
data:{
video: "https://www.w3schools.com/tags/movie.mp4"
},
methods:{
changeVideo(){
this.video = "http://techslides.com/demos/sample-videos/small.mp4"
}
}
})
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<div id="app">
<video width="450" controls :src="video"></video>
<div>
<button #click="changeVideo">Change</button>
</div>
</div>
If you need to change the src dynamically, you can change the src and load the new src with the .load() function.
new Vue({
el:"#app",
data:{
src: ""
},
methods:{
changeVideo(newSrc){
this.$data.src = newSrc;
//Force video load.
var vid = this.$refs.video;
vid.load();
}
}
})
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<div id="app">
<video width="450" controls :src="src" ref="video"></video>
<div>
<button #click="changeVideo('http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4')">Change1</button>
<button #click="changeVideo('https://www.w3schools.com/tags/movie.mp4')">Change2</button>
</div>
</div>
Try setting the entire source as variable in the controller.
<video controls autoplay>
{{{ src }}}
</video>
new Vue({
el: '#app',
data: {
src: '<source src="#url" type="video/mp4">'
}
})