What I have currently will display my poster once the video ends. However, it also shows at the beginning of the video (which is set to autoplay). I don't want it at the beginning of the video, just the end. Here's what I have.
<div id="wrapper">
<video id="example_vid" class="video-js vjs-default-skin"
controls preload="auto" poster="images/poster_test.png"
width="780" height="439"
autoplay
data-setup='{"example_option": true}'>
<source src="videos/subaru.mp4" type='video/mp4' />
<source src="videos/subaru.webm" type='video/webm' />
<source src="videos/subaru.ogv" type='video/ogg' />
</video>
</div>
…
<script>
var vid = videojs("example_vid");
vid.on("ended", function(){
vid.posterImage.show();
vid.currentTime(0);
})
</script>
Try this. It worked for me.
<script>
var vid = document.getElementById("myVideo");
vid.addEventListener('ended', function(){
vid.poster = "images/poster_test.png";
vid.src = "";
vid.controls = false;
});
</script>
I didn't test this, but I'd try 1) taking the poster attribute out of the video element, then 2) setting it through script on ended. Like this
<script>
var vid = videojs("example_vid");
vid.on("ended", function(){
vid.poster("images/poster_test.png");
vid.currentTime(0);
})
</script>
Related
I’m trying to remove just setting the gear icon but If I set false for controls it’s going out all other like Play/Pause.
If I’m using my own player it’s ok BUT I want to use Cloudflare Player, not my custom player. Because in Cloudflare player there have 1x auto and other options which are not in my player. (Using the player API)
Can anyone help me by giving a code example ?
<iframe
src="https://iframe.videodelivery.net/$5d5bc37ffcf54c9b82e996823bffbb81"
style="border: none;"
height="555"
width="666"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowfullscreen="true"
id="stream-player"
></iframe>
<script src="https://embed.videodelivery.net/embed/sdk.latest.js"></script>
<!-- Your JavaScript code below-->
<script>
const player = Stream(document.getElementById('stream-player'))
player.addEventListener('play', () => {
console.log('playing!')
})
player.play().catch(() => {
console.log('playback failed, muting to try again')
player.muted = true
player.play()
})
</script>
The audio tag works fine when i open the page via router-link(from another page), however if i refresh this current page with audio tag, audio didn't reload, is there anything that i need to add or change? or i should try other method than audio to play audio files?
Below are my code:
Should I try another method to play .mp3 files?
<template lang="pug">
audio#player(autoplay="" loop="")
source(src="#/assets/alertsound.mp3" type="audio/mp3")
</template>
I am not really sure whats causing this exactly but there is another way you can play your audio ...this will trigger the audio load() :
new Vue({
el: "#app",
mounted: function() {
this.$nextTick(() => {
this.$refs.audio.load()
})
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<audio ref="audio" autoplay loop>
<source src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg"
type="audio/ogg"
>
</audio>
</div>
</div>
I am trying to create a Vue component that bounces when the mouse cursor hover over it. I am using the animate.css library and changing the component class with #mouseover then resetting it on #mouseout.
It is almost ok. The only issue occurs when the user stops the cursor near the border. Due to the animation behavior, the mouseover/mouseout events will be called repeatedly, causing the component to flick. I could minimize it using a timeout before resetting the class but the behavior is still uncertain sometimes.
Is there any elegant way (or Vue way) to solve it?
Here is my code:
Html:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
<body>
<div id="app">
<h1>Hover the mouse near the border</h1>
<hr>
<button :class="classes"
#mouseover="hoverOver"
#mouseout="hoverOut"
>
IMMEDIATE
</button>
<br><br><br>
<button :class="classes"
#mouseover="hoverOver"
#mouseout="hoverOutTimeout"
>
WAIT JUST A BIT
</button>
</div>
</body>
Javascript:
new Vue({
el: "#app",
data: {
classes: []
},
methods: {
hoverOver: function() {
console.log('over');
this.classes = ['animated', 'bounceIn']
},
hoverOut: function() {
console.log('out');
this.classes = []
},
hoverOutTimeout: function() {
setTimeout(() => {
console.log('out');
this.classes = []
}, 1000);
},
}
})
https://jsfiddle.net/marcellorvalle/eywraw8t/477611/
Neat. Looks like as the button changes size during the animation, the mouse goes in and out of hover state because the edge is moving.
I added a div around each button, and attached the hover triggers to the divs instead of the buttons:
<body>
<div id="app">
<h1>Hover the mouse near the border</h1>
<hr>
<div #mouseover="hoverOver" #mouseout="hoverOut">
<button :class="classes">IMMEDIATE</button>
</div>
<br><br><br>
<div #mouseover="hoverOver" #mouseout="hoverOutTimeout">
<button :class="classes">WAIT JUST A BIT
</button>
</div>
</div>
</body>
https://jsfiddle.net/jmbldwn/kbswLpto/5/
I am using Vue-strap alert component with Vue.js. The alert box works fine, however, I am unable to auto close the alert box after specified duration. Here is the component code I am using.
<alert :show.sync="showAlert" placement="top" duration="3000" type="success" width="400px" dismissable>
<span class="icon-info-circled alert-icon-float-left"></span>
<strong>Success</strong>
<p>{{alertMessage}}</p>
</alert>
The alert box remains open and close on clicking the close (x) button. Here is a code pen that uses the alert component.
https://codepen.io/Taxali/pen/dKJpKY
Any suggestion, how to auto close the alert box after 3 seconds? Thanks.
According to source code, setTimeout(_, duration) is only set if show props is change.
So there is a workaround, you can toggle show from false to true in mounted methods, or you can use a button to toggle the alert.
Another way to setTimeout yourself in Vue component.
var vm = new Vue({
components: {
alert:VueStrap.alert,
},
el: "#app",
data: {
alertMessage:"Activity Saved Successfully.",
showAlert:false
},
mounted() {
this.showAlert = true
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-strap/1.1.40/vue-strap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div id="app">
<alert :show.sync="showAlert" placement="top" :duration="3000" type="success" width="400px" dismissable >
<span class="icon-info-circled alert-icon-float-left"></span>
<strong>Success</strong>
<p>{{alertMessage}}</p>
</alert>
</div>
I am not experienced in Javascript, I have the following script to play video files on Andriod phone, and it works fine.
<script type="text/javascript">
function PlayMyVideo(arg) {
var myVideo = document.getElementById([arg]);
myVideo.play();
}
</script>
<video id="what" src="what.mp4" poster="" />
<input type="button" onclick="PlayMyVideo('what')" value="Play" />
I am trying to write the tag on the fly:
<script type="text/javascript">
function PlayVideo() {
new_video = document.createElement('video');
new_video.setAttribute('scr', 'what.mp4');
new_video.play();
}
</script>
<input type="button" onclick="PlayVideo()" value="Play2" />
Nothing happen, would appreciate your suggestions.
Thanks in advance
new_video.setAttribute('scr', 'what.mp4');
'scr' is misspelled. It should be 'src'.
and also you should wait for the movie to load before play
Well you're not appending the newly created tag to anything, so it can't play because it's in "memory"/"void", not on the screen.
<div id='plc'> </div>
<script type='text/javascript'>
function PlayVideo() {
new_video = document.createElement('video');
document.getElementById('plc').appendChild(new_video);
new_video.setAttribute('scr', 'what.mp4');
new_video.play();
}
you are creating the video element, you need to add it to the DOM before it will be visible, more info here: http://www.javascriptkit.com/javatutors/dom2.shtml