I'm new to front end (vue). Would love to hear some feedback
I have a video playing on loop. It works fine if the url is good. But if the url is not found, I want to replace it with a placeholder (could be an image). I've tried:
<video autoplay="autoplay" muted loop>
<source :src="url" type="video/mp4" #error="replaceWithPlaceholder">
</video>
replaceWithPlaceholder(e) {
e.target.src = defaultUrl
},
I've done this the exact same way with an image, but Im not sure why it isnt working for a video. What am I doing wrong?
figured it out by using poster
<video autoplay="autoplay" muted loop poster="defaultUrl">
Related
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>
The code snippet is given below. I have used impress.js to create an online presentation. I want to insert a video in the last slide which autoplays when the slide comes up. But I am unable to implement that. Can anyone please help me with this?
<div class="step box" data-x="0" data-z="4000" data-rotate-y="0">
<video width="800" height="600" controls autoplay>
<source src="electric_bulb_hd_stock_video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
In impress.js, the DOM prevent video to autoplay, but you can use API, like this:
var videoStep = document.getElementById("video-step");
var video = document.getElementById("video");
videoStep.addEventListener("impress:stepenter", function(){
video.play();
}, false);
videoStep.addEventListener("impress:stepleave", function(){
video.pause();
}, false);
HTML:
<div id="video-step" class="step" data-x="-50000" data-y="2000" data-z="-60000" data-scale="6">
<video id="video" width="420" height="340" autoplay>
<source src="video/test.webm" type="video/webm">
</video>
</div>
With the code above, when you enter this step, the video will play automatically, and it will pause when you leave this step. Give it a try :)
Try autoplay="autoplay"
http://www.w3schools.com/tags/att_video_autoplay.asp
It should work.
Initially the poster is visible before video call start after video call ends i am able to see a black background in place of poster in video container.
below is the html tag that i have used for this purpose.
<div id="videoSmall">
<video id="videoInput" autoplay width="240px" height="180px" poster="img/webrtc.png"></video>
</div>
i have tried to reset "videoInput" div with this code
var tag = $("#videoInput").clone();
$("#videoInput").replaceWith(tag);
This code works and brings poster image back but the issue with this is when i am performing video call again without refreshing the page .. the poster is not vanishing in order to show video .
You can do this by adding ended eventListener to the video element, and call the video load() again.
Here is a working example: CodePEN
HTML:
<video id="video" width="320" height="240" controls poster="http://www.w3schools.com/images/w3html5.gif">
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
JavaScript / jQuery:
var video= $('#video')[0];
var videoNew= $('#video');
videoNew.on('ended',function(){
video.load();
});
Here is the Development site: legiondesigns.com/pauls
And I also posted a previous question here Loading HTML Video With jQuery and that was working for a few days then it just stopped working. I am using WordPress 4.2.2 so I know that I have to use "wp_localize_script" which I have done. Because when you inspect the video element in chrome you can see that it is proper loading in the correct path. I can even right click the link in the inspection tool and click "open link in new window" and it opens the video and starts playing it. So I know that the link is correct and the "wp_localize_script" is working properly. But nothing is showing up except the poster image for the video.
When Looking at the debug console in firefox I see the message: "Invalid URI. Load of media resource failed (3). So firefox is saying that it failed to load my videos. When I switch from console back to "inspector" in developer tools and find the video elements. It is showing the correct location and I can also copy that and paste it into a new window and the video comes up and plays. So I don't even see why firefox is giving me that error.
Here is my WordPress Localization PHP:
$site_parameters = array(
'site_url' => get_site_url(),
'theme_directory' => get_template_directory_uri()
);
wp_localize_script('custom-js', 'SiteParameters', $site_parameters );
Here is my jQuery:
var v = [];
v[0] = ["/library/videos/header.webm", "/library/videos/header.ogv", "/library/videos/header.mp4"];
v[1] = ["/library/videos/mobHead.webm", "/library/videos/mobHead.ogv", "/library/videos/mobHead.mp4"];
var index = window.innerWidth <= 641 ? 1 : 0;
$('#webmvid').attr('src', SiteParameters.theme_directory + v[index][0]);
$('#oggvid').attr('src', SiteParameters.theme_directory + v[index][1]);
$('#mp4vid').attr('src', SiteParameters.theme_directory + v[index][2]);
And here is my HTML:
<video autoplay="" loop="" poster="/library/images/vidPoster.jpg" id="bgvid">
<source id="webmvid" src="" type="video/webm">
<source id="oggvid" src="" type="video/ogg">
<source id="mp4vid" src="" type="video/mp4">
</video>
Im pretty much stuck so any help is greatly appreciated.
Well after racking my brain I figured it out. Well somewhat. It only works if I have something already in the src="" part of the html so by setting my HTML to:
<video autoplay="" loop="" poster="/library/images/vidPoster.jpg" id="bgvid">
<source id="webmvid" src="temp" type="video/webm">
<source id="oggvid" src="temp" type="video/ogg">
<source id="mp4vid" src="temp" type="video/mp4">
</video>
Now it works. If I remove the temp from src="" then it does not work.
Hi im using mediaelement player wich is great actually, the problem is even if i convert the file to all the formats, in ipad is strange some times i just hear audio, some times nothing plays , and just once, just one time the video play with the play image logo all the time over it.. what is wrong with my mediaelement code
<div class="videoquon">
<div class='my-video-close' onclick='player.pause();'></div>
<div id="marfvideo"><video width="530" height="377" id="player" controls="controls">
<source src="media/mp4/ingles.mp4" type="video/mp4" title="mp4">
<source src="media/webm/ingles.webm" type="video/webm" title="webm">
<source src="media/ogv/ingles.ogv" type="video/ogg" title="ogg">
<source src="media/flv/ingles.flv" type="video/flv" title="flv">
<p>Tu navegador necesita ser actualizado.</p>
</video></div>
<script>
$('audio,video').mediaelementplayer({
// if the <video width> is not specified, this is the default
defaultVideoWidth: 530,
// if the <video height> is not specified, this is the default
defaultVideoHeight: 377,
autosizeProgress: true,
// Hide controls when playing and mouse is not over the video
features: ['playpause','progress','current','duration','tracks','volume','sourcechooser','fullscreen'],
alwaysShowControls: false
});
</script>
<script>
// JavaScript object for later use
var player = new MediaElementPlayer('#player');
// ... more code ...
</script>
</div>