Im using a flexslider that has audio files for each slide, but I don't want to load countless audio files right away on the page. So im trying to get the data-src to become the src after each slide
the slides are currently as follows:
<div class="flexslider carousel">
<ul class="slides">
<li>
<img src="http://www.quinnmedical.com/skin/frontend/gigasavvy/quinn/ppt/Slide01.jpg" />
<audio id="demo" controls>
<source src="/skin/frontend/gigasavvy/quinn/audio/Slide1.mp3" type="audio/mpeg" />
</audio>
</li>
<li>
<img src="http://www.quinnmedical.com/skin/frontend/gigasavvy/quinn/ppt/Slide03.jpg" />
<audio id="demo" controls>
<source data-src="/skin/frontend/gigasavvy/quinn/audio/Slide3.mp3" src="" type="audio/mpeg" />
</audio>
</li>
</ul>
</div>
In the after function i want to change data-src to src. Any help would be greatly appreciated as how to go from data-src to src
Renaming an attribute is not be possible. You can add new attribute and remove the old one.
Suppose there is a click event as in the following example:
$('#demo').on("click", "img", function () {
var t = this;
var source = $(t).children("source");
$source.attr({
src: $t.attr('data-src')
}).removeAttr('data-src');
}
Please modify the event according to your requirements.
Try this:
$('source').attr("src", $(this).data('src'));
$('source').removeAttr('data-src');
This should move the url from data-src to src, and then remove the data-src attribute.
Inside the after function get the currently visible slide and then get the auto on it and it's source. Next check to see if it already has a src attribute. If not then set it to it's own .data('src'). Add this into the flexslider object.
after: function(){
var $currentAudio = $('.flex-active-slide audio source');
if(!$currentAudio.attr('src')){
$currentAudio.attr('src', $currentAudio.data('src'));
}
}
Related
I would like to do something pretty similar to the netflix page on the browser.
I got an image, when it's hovered, its scale change but I would like to replace the image by a playing video with the song. I've tried to disable/enable on hovering but I got a problem: Its always the same video which is playing (surely because I've used the same id).
I've used JQuery to detect the hover then play the video, and a getElementById to get the video itself...
Here is my javascript code:
$(document).ready(function(){
$('a').hover(function(){
Show()
Play()
}, function(){
Pause()
UnShow()
});
});
const myVideo = document.getElementById("video");
function Play() {
myVideo.play();
}
function Pause() {
myVideo.pause();
}
And my HTML code:
<body>
<nav>
<div class="logo"><h1>My Guitar Site</h1></div>
<div class="search">
<input type="text">
</div>
</nav>
<div class="ensemble">
<div class="song">
<a href="" class="a-song">
<img src="Images/LetMeDownSlowly.jpg" alt="">
<video id="video" width="120">
<source src="Video/test.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</a>
<h5 class="artistenom">Alec Benjamin - Let Me Down Slowly</h5>
</div>
<div class="song">
<a href="" class="a-song">
<img src="Images/CurduroyDreams.jpg" alt="">
</a>
<h5 class="artistenom">Rex Orange County - Corduroy Dreams</h5>
<video id="video" width="120">
<source src="Video/test2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
Thanks for your help
Im not big on jQuery but here's the general concept. You can add the poster attribute as follows. That should show the image.
<video controls poster="/images/cool-image.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg"
</video>
Assuming you have an event for hovering on and another for hovering off you can do the following:
Hover on
Play the video and remove the poster attribute:
function Play() {
var poster = $(vid).attr("poster");
$(vid).attr("poster","");
myVideo.play();
}
Hover off
Stop the video and add the poster attribute:
function Pause() {
var poster = $(vid).attr("poster");
$(vid).attr("poster", "poster.png");
myVideo.pause();
}
Again Im not a jQuery guy but generally I believe that will work.
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">'
}
})
I have a popup that contains a video with empty source attributes.
<div id="event-popup">
<video width="320" height="240" controls id="event-popup-video">
<source src="" type="video/mp4" id="epv-mp4"></source>
<source src="" type="video/ogg" id="epv-ogg"></source>
</video>
</div>
This is used for multiple Leaflet map markers the a user can click on, which will trigger the popup to appear and then inject the correct src attribute based on the id of the clicked item.
var marker = L.marker(new L.LatLng(a.lat, a.lon), {
alt: a.cartodb_id,
icon: starIcon,
clickable: true
}).on('click', onClick);
The onClick function displays the popup and injects the correct src file location (S3 bucket item) into the .
function onClick(e){
// other code to display popup
showChangeEventVideo(e.target.options.alt);
}
function showChangeEventVideo(id){
$("#epv-mp4").attr("src", "s3_URL_based_on_ID.mp4");
$("#epv-ogg").attr("src", "s3_URL_based_on_ID.ogg");
}
The code executes, displays the popup, and inserts the correct src URL into the , but doesn't show the video. I can hard code a video URL into the HTML src attribute and the video appears.
Simply need to add .load() at the end of each .attr() call to force the source to refresh itself.
I am trying to figure out how to apply an image rollover effect to the picture element in a responsive website.
The question is can an image rollover be applied the scrset attribute in the picture tag?
Working example img tag with javascript rollover effect
<img src="media/images/feature-films/tmbs/zen-zero.jpg"
onmouseover="this.src='media/images/feature-films/tmbs/zen-zero-ro.jpg'"
onmouseout="this.src='media/images/feature-films/tmbs/zen-zero.jpg'"
alt=""/>
Not working example of picture element with javascript rollover effect
<picture>
<source srcset="media/images/feature-films/tmbs/zen-zero-large.jpg"
onmouseover="this.src='media/images/feature-films/tmbs/zen-zero-large-ro.jpg'"
onmouseout="this.src='media/images/feature-films/tmbs/zen-zero.jpg'"
media="(min-width: 880px)">
<source srcset="media/images/feature-films/tmbs/zen-zero-small.jpg" media="(max-width: 478px)">
<source srcset="media/images/feature-films/tmbs/zen-zero-medium.jpg">
<!-- fall back -->
<img srcset="media/images/feature-films/tmbs/zen-zero-medium.jpg" alt="">
</picture>
Does anyone have any suggestions hoe to achieve a rollover effect on the picture tag using the srcset?
The web page has about 12 responsive images that need a rollover effect.
Changing src/srcset is not optimal, even for a single img, since it can abort the download of the image if you hover it or leave it before the download is complete.
I think I would do one of these:
Clone the picture with cloneNode(true) and rewrite the URLs of the clone. When the original picture element receives a mouseover event, replace it with the clone. When the clone receives a mouseout event, replace it with the original.
Duplicate the picture in the markup, with the second one representing the hovered image. The second picture has a hidden attribute set. Toggle the hidden attribute on both elements as appropriate.
In the future, it should be possible to toggle the image with CSS using something like img:hover { content:image-set(...); }.
HTML:
<picture id="zen">
<source class="large" srcset="media/images/feature-films/tmbs/zen-zero-large.jpg" media="(min-width: 880px)">
<source srcset="media/images/feature-films/tmbs/zen-zero-small.jpg" media="(max-width: 478px)">
<source srcset="media/images/feature-films/tmbs/zen-zero-medium.jpg">
<!-- fall back -->
<img srcset="media/images/feature-films/tmbs/zen-zero-medium.jpg" alt="">
</picture>
jQuery:
$(document).ready(function() {
$('#zen').on('mouseover', function () {
$(this).find('.large').attr('srcset', 'media/images/feature-films/tmbs/zen-zero-large-ro.jpg');
console.log('mouse over');
})
$('#zen').on('mouseout', function () {
$(this).find('.large').attr('srcset', 'media/images/feature-films/tmbs/zen-zero-large.jpg');
console.log('mouse out');
})
});
I've got a gallery of sorts with 10 or so thumbnails that each represent one song. To control the playback of each, I've set a play button to fades in via jQuery. After some digging around Apple's Dev Center I found some native JavaScript to control audio. It works beautifully, but is written for control of one object at a time. What I'd like to do is rewrite it as one function that dynamically controls the playback/pause of the thumbnail you're selecting.
Below is the code that I found.. works, but it'd be a lot of unnecessary code to write it 10 times.
Thanks for your help and advice, always!
HTML:
<div class="thumbnail" id="paparazzixxx">
<a href="javascript:playPause();">
<img id="play" src="../images/icons/35.png" />
</a>
<audio id="paparazzi">
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
JavaScript:
<script type="text/javascript">
function playPause() {
var song = document.getElementsByTagName('audio')[0];
if (song.paused)
song.play();
else
song.pause();
}
</script>
jQuery is awesome for this sort of thing. It gives you the ability to easily manipulate elements based on their relationship to other elements in the DOM tree. In your example you want to be able to make the <a> elements only affect the <audio> elements that are right next to them when clicked.
The problem with your current Javascript code is that it is actually just grabbing only the first audio element on the entire page.
Here's how you can change your code to support an unlimited number of <a> & <audio> pairs.
Add a class to the <a> tag ('playback' in my example)
Replace the href attribute with a '#'
Then use jQuery to attach a handler to the click event for elements with that class.
HTML
<div class="thumbnail" id="paparazzixxx">
<a class="playback" href="#">
<img id="play" src="../images/icons/35.png" />
</a>
<audio id="paparazzi">
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
Javascript
<script type="text/javascript">
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
// This next line will get the audio element
// that is adjacent to the link that was clicked.
var song = $(this).next('audio').get(0);
if (song.paused)
song.play();
else
song.pause();
});
});
</script>