I have a setup where there is a background video displaying depending on the current weather conditions, shown here: http://pitfarmtennis.co.uk/cms/.
There are 6 different videos, currently the jQuery code to decide which to show just sets them to display:none, This sadly means all of them still load.
This is the jQuery that is currently making a certain video play, in this case a sunny video:
/*Day-sun*/
if((weather.code == "28")||(weather.code == "30")||(weather.code == "44")) {
$('.home-bg-sun').css("display","inline");
}
One solution I have tried is to set all of the src attributes in the HTML to data-src, and then changing the relevant one to src to fire the video, which hasn't worked to date, but I might have done something wrong:
jQuery:
/*Day-sun*/
if((weather.code == "28")||(weather.code == "30")||(weather.code == "44")) {
$('.home-bg-sun').attr('src', $('.home-bg-sun').attr('data-src'));
}
HTML:
<div class="home-bg-sun">
<video class="home-bg-sun-video" autoplay loop poster="wp-content/themes/eddiemachado-bones-9db85e4/library/images/home-bg-sun-first_frame.jpg">
<source id="home-bg-sun-video-source" src="wp-content/themes/eddiemachado-bones-9db85e4/library/videos/home-bg-sun.webm" type="video/webm">
<source id="home-bg-sun-video-source" src="wp-content/themes/eddiemachado-bones-9db85e4/library/videos/home-bg-sun.mp4" type="video/mp4">
</video>
</div>
Any help would be much appreciated!
PS: I am using Yahoo Weather to fetch weather conditions.
There is a preload attribute on the video element.
You may want to try the metadata or none value.
But note that this attribute is only a hint for browsers, which are not forced to follow it.
You can try to remove "autoplay" attribute from hidden videos, and refactor your hypertext like:
Related
I have a question,is it possible to call a javascript function with the play button from the video tag controls ?
<video controls id="video" src="../../data/myvideo.mp4"></video>
I don't know and I didn't find how to have acces in JS to the play button from the "controls".
I tried getElement or query but nothing works.
video tag has onplay attribute you can give custom func.this attribute. Also you can see all different video tag attribute with console.log getElementById("yourTagId")
So I am using audio.js on my website. I customized audio.min.js that there would be only "PLAY/PAUSE" button visible. I want that button to appear at the left of the text. How can I do that?
Cause right now, text always appears bellow "play/pause" button, in a new line. I want it to be on the same line.
The code on my HTML page looks like this:
<audio>
<source src="https://www.website.com/voice/sample.mp3">
</audio>
<!-- This is the text I want to see on the same line as the audio tag which is in use with audio.js -->
You have to overwrite audiojs's css in order to modify, and try to add something like this css:
.audiojs {
float:left;
}
There is code: https://jsfiddle.net/qp5xjxb9/1/
I hope it helps
is there a way to play a mp3/wav file in html only once if the condition is met. I am trying to do but the mp3 file is not playing after my required condition is met..
<input type="text" id="question"/>
<audio src="one.mp3" id="one" preload="auto"></audio>
<input type="text" id="question1"/>
<audio src="two.mp3" id="two" preload="auto"></audio>
<script>
$("#question").blur(function() {
if ($(this).val() == 'Paris') {
document.getElementById("one").play();
}
});
$("#question1").blur(function() {
if ($(this).val() == 'France') {
document.getElementById("two").play();
}
});
</script>
Assuming that your condition is truly met, there are a few reasons why you might not be able to hear your sound play:
Your browser does not support the audio type.
See the table here to find out if your browser supports your specific type of media (in this case, MP3).
Another way you can check for this is by using the example.
If your browser does not accept your media type, get the proper media file and add it as a source as shown in the example.
The media file cannot be found.
Make sure that your media file can be found by the browser.
You can check this by heading to the media's src attribute (in this case, ./one.mp3 or ./two.mp3).
Your volume is silent.
Although this may seem silly, a hard day of work can leave one forgetful.
Check that your speakers / headphones are working and that your volume is at a high level.
Last but not least, the file is corrupted, damaged, or contains no information.
To check for this, play the media file on your laptop. Your program should let you know if the file is corrupted or damaged.
Check the file's size to make sure there is information in it.
I have an embedded flash video player on html page,
something like this:
<embed id="flash-videojs-31-field-mech"
name="flash-videojs-31-field-mech"
src="http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf"
width="320"
height="240"
type="application/x-shockwave-flash"
allowscriptaccess='always'
allowfullscreen='true'
flashvars="config={'playlist': [ {'url': 'http://example.com/president.mp4', 'autoPlay':true, 'autoBuffering':true} ]}"
/>
Now I need to add an auto repeat functionality. I found this solution: http://flowplayer.org/forum/3/20130
Unfortunately, it involves passing function objects around and I have difficulties inserting it into flashvars attribute.
I can't take it as is, cause html snippet is actually generated by third party code and I want to keep number of tweaks minimal.
If you're using flowplayer, then you possibly can modify it after the embed is done.
Try using their API and doing something like:
$f().onFinish(function() {
this.stop();
this.play();
});
This should enable autorepeat for all players on your page. You may also use filter to select the players you need.
I have found several sites on Google about this problem and also found a few questions on here, which were apparently answered, but as I've been working on this for the last one or two weeks and just can't seem to get it to work at all, I wanted to revisit this.
I'm working on a demo that uses several video tags (vd1-3) which are then used in several canvas tags (cv1-3).
<video id="vd1" width="480" preload>
<source src="jerryclips/Bild01.webm" type="video/webm" id="vd1webm">
<source src="jerryclips/Bild01.mp4" type="video/mp4" id="vd1mp4">
</video>
<canvas id="cv1" width="160" height="270"></canvas>
I got a working version that uses one video. Now I would like to be able to dynamically change the clips that are playing in my video tags and subsequently in the canvas tags. Changing only one source worked, as far as I remember that was just "vd1.src = '...'", but I want to have at least two video files in there.
Now as you can see here, I tried using id's for the sources (as was suggested in an answered question here on stackoverflow), but I wasn't able to make that work.
We were able to get all the sources with this little bit of code here:
var x = document.getElementById("vd1");
var items = x.getElementsByTagName("source");
for(var i= 0; i < items.length; i++){
alert(items[i].getAttribute('src'));
}
}, false);
But I also failed to use it in order to change my sources. I thought I might be able to use "items[i].src = ..." or use setAttribute, but I can't get anything to work.
I'm still fairly new to all this, so I'm possibly missing something very simple... so if anyone has an idea and could point me into a direction, I would really appreciate it.
Update:
Eventually we came up with this solution which is pretty simple and straightforward
var videoPlaying = vd1.currentSrc;
var ext = videoPlaying.substr(videoPlaying.lastIndexOf("."));
vd1.src = "jerryclips/Bild02"+ext;
I think you're overcomplicating things - there's no need to update multiple sources as any given browser is only ever going to be playing one of your videos. If you're loading new sources with JavaScript you can simply query the currentSrc property of vd1, determine which of the videos is playing and load the new video in that format. At that point I'd simply remove all the source elements and set video.src to the new value.