How to display views on html5 video? - javascript

I am trying to get a sort of 'YouTube' like number of views section in my html. I want to add 1 everytime the viewer gets over minute 4 of the video.
So far I applied this Javascript but it does not look like working, what am I missing?
<section id="totViews">
<script>
document.getElementById("totViews").innerHTML = counter;
var counter = 0;
$('section video').on("timeupdate", function() {
if ($('section video')[0].currentTime >= 4) { counter++;
}
});
</script> views
</section>

JavaScript runs in the user's browser. It has no way of communicating with other browsers viewing the video, and it will stop counting when you close the page, so it will only ever be able to count how often you watched the video in the current session.
You need to load and store this information on your server somewhere if you want to make this work.

Related

Stopping my embedded Youtube Videos on click

I've been struggling with this for a while now and I've tried a number of solutions but I'm totally stuck on this:
I have a number of embedded videos from YouTube on my Site and I have navigation buttons. I want the videos to be paused as soon as any of the buttons are clicked, no matter how many of them are playing at that time. I embedded them the classic way by using the iframe code that YouTube gives you when clicking "embed" and gave them the ".yt" class.
My function currently looks like this:
$(function () {
$('#shadingleft').on('click', function () {
rotateLeft();
reset();
selector = selector - 1;
if (selector <= -1) {
selector = 9;
}
$('.clicked').toggleClass('clicked');
})
$('#shadingright').on('click', function () {
rotateRight();
reset();
selector = selector + 1;
if (selector >= 10) {
selector = 0;
}
$('.clicked').toggleClass('clicked');
})
$('#shadingtop').on('click', function () {
rotateUp();
$('.clicked').toggleClass('clicked');
})
$('#shadingbottom').on('click', function () {
rotateDown();
$('.clicked').toggleClass('clicked');
})
$('.art').on('click', function () {
$(this).toggleClass('clicked');
})
});
As you can see I already managed to toggle the highlighted ".art" elements in my gallery using toggleClass. Unfortunately it doesn't seem to work for playing and pausing videos.
Whenever one of the four "shading..." elements is clicked I want my ".yt" elements to stop playing the embedded video.
Thanks for helping!
This is a actually a big limitation with iframes. Most browsers won't allow a page's scripts to interact with the content of its iframes for security reasons. So chances are that there is no way at all to do that.
One way you could stop videos would be to reload the youtube iframe entierly, but that would put it back to 00:00 as if it was never played.
Another would be to try and fetch the video stream from youtube on your server and then displaying it in a player of your own on your page. (Which is obviously way more complicated than using an iframe)

Toggling a class and audio and saving it using localstorage

The problem I'm trying to solve:
On my website I'm trying to build a way for the user to change the volume to on/off and save it across different pages. So when the user goes to index.html and about.html, I want the setting saved.
My thinking:
I am currently trying to solve this by saving the class active to localstorage and adding that to the button #MyElement that I use to toggle the audio. Then the .active class on the #MyElement button determines if audio will be played or not.
Furthermore I have javascript to play the audio file when I hover over the .box divs (1 and 2 in the codepen). This part seems to be working as I want it, however: when the page loads (I refresh the page and the previous setting was .active, the audio doesn't play! Then I need to toggle it again to .active and only then will it play. It seems like this piece of code doesn't recognise the other part.
How do I make sure the audio part listens to the localstorage class that is saved? I believe my code also uses part jQuery and part native javascript. I am quite new to this and mostly try to learn from other code snippets and slowly implementing things, however I'm stuck on this now for some time.
// Playing audio based on .active
document.querySelectorAll("[data-sound]").forEach(function (element) {
// Play associated audio
element.addEventListener("mouseenter", function (event) {
// element = $("body");'
if ($("#MyElement").is(".active")) var soundKey = element.dataset.sound;
var audioElement = document.querySelector("#" + soundKey);
if (!audioElement) return;
audioElement.currentTime = 0;
audioElement.play();
});
});
// Saving classes to localstorage
$("#MyElement").addClass(localStorage.getItem("ClassName"));
$("#MyElement").on("click", function () {
if ($(this).hasClass("active")) {
$(this).removeClass("active").addClass("inactive");
localStorage.setItem("ClassName", "inactive");
} else {
$(this).removeClass("inactive").addClass("active");
localStorage.setItem("ClassName", "active");
}
});
https://codepen.io/lucvanloon/pen/LYNLeEw
Thank you for taking a look!
Luc
Create a sessionStorage as follows:
sessionStorage.setItem("audio", "active");
document.getElementById("result").innerHTML = sessionStorage.getItem("audio");
I found out that the codepen isn't working because of policy in Google Chrome: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
It's not allowed to autoplay audio. Regardless if I save a previous user setting or not, it's always reset when the page refreshes.

Audio playing on image click using js/jquery, but not working in some web browsers?

I used some code from this thread to create a website where a randomly selected sound plays on image click: Play random sounds without repeat. It was important to me that the sounds do not repeat until the entire series has been cycled through, which is why I went with this solution: http://jsfiddle.net/cbuckley/FdLge/
It works like a charm in Google Chrome, but for some reason it doesn't seem to play the audio in other web browsers like Safari. I knew it would not work on mobile, but I was not expecting this. Any ideas what I can do to resolve it?
This is my site, for reference: http://comfortinajar.com/
the html is as follows:
<div id="element"></div>
<img src="Images/Screen.jpg" id=test>
and the script is:
<script>
var sounds = [];
// Return the full list of URLs in random order
function getSounds() {
return [
'Audio/Comfort1.mp3',
'Audio/Comfort2.mp3',
'Audio/Comfort3.mp3',
'Audio/Comfort4.mp3',
'Audio/Comfort5.mp3',
'Audio/Comfort6.mp3',
'Audio/Comfort7.mp3',
'Audio/Comfort8.mp3',
'Audio/Comfort9.mp3',
'Audio/Comfort10.mp3',
'Audio/Comfort11.mp3',
'Audio/Comfort12.mp3',
'Audio/Comfort13.mp3',
'Audio/Comfort14.mp3',
'Audio/Comfort15.mp3',
"Audio/Comfort16.mp3",
"Audio/Comfort17.mp3",
"Audio/Comfort18.mp3"].sort(function () {
// http://stackoverflow.com/a/18650169/283078
return (.5 - Math.random());
});
}
// Play the next sound
function playSound() {
if (!sounds.length) {
// Get the list of sounds (random order)
sounds = getSounds();
}
// Pops a URL every time, ensuring all are played exactly once
$("#element").html(
'<embed src="' + sounds.pop() +
'" hidden="true" autostart="true" />'
);
// Once all the URLs have been popped, the array is repopulated
}
$('#test').click(playSound);
</script>
The code also currently causes a page jump where the div tag is (at the very bottom of the page) the first time that it is loaded, and a block of white remains there after that, and the first sound loaded fades in for some reason (reducing audibility), but I am less concerned with those problems. All I really care about is making the sound work in all browsers. Let me know if you can help!

JS / JQUERY iframe.contents() syntax

I'm currently working on a project which includes when the user hovers over a certain div then it will play the associated audio file and stop all other audio elements on the page that contain the class 'stoppable' in them.
I've got the code working but now I'm having that page as an iFrame on another page which can insert elements into the iframe, so I have to keep adding iframe.contents on elements to make them work.
On the code below it detects when the user has entered the div and plays the correct audio however it does not stop all the other audio elements.
I believe I have the incorrect syntax on the
$('.stoppable:not($("#new-audio-476333", iframe.contents()))
section, and I'm not sure what the correct syntax would be.
var iframe = $('#clientframe');
$('#476333',iframe.contents()).mouseenter(function() {
$('.stoppable:not($("#new-audio-476333", iframe.contents()))').each(function(){
this.pause(); this.currentTime = 0;
});
var audio = $('#new-audio-476333', iframe.contents())[0];audio.pause();audio.play(); });
Any help would be greatly appreciated.
Thanks!
-Hopeless
$('.stoppable:not(#new-audio-476333)', iframe.contents())
This means that elements with class name stoppable which its id is not new-audio-476333.

HTML5 + Javascript audio trigger events at certain times in audio playback

I am researching setting up a script that will show certain notes along with accompanying music tracks. Basically I need certain times in the audio track to trigger events. I have seen I could use the currentTime similar to the following, but I am getting hung up on a good way to make a concise function to move between frames and move back and firth if there is a rewind etc. Help's appreciated greatly!
$("#ogg_player_1_obj").bind('timeupdate', notePosition);
function notePosition(){
myVid=document.getElementById("ogg_player_1_obj");
mct=myVid.currentTime;
//SET Frame based on time???
}
function notePosition(){
//your code.
if(frame1start <= mct && frame1end >= mct) {
$(".frame").fadeOut(100);
$("#frame1").fadeIn(100);
}
//and again for every frame.
}
This works if you put every frame in a seperate element with class frame and the id frame + number.

Categories

Resources