We Keep Coding

How can I unmute (and turn off autoplay) a YouTube video for twentyseventeen?

I have a lecture on YouTube that I would like to use as the header movie for my twentyseventeen child themed website. I would like it with sound and without autoplay (As viewed on YouTube, the video has sound intact).
Following another question about autoplay, I set a video URL of https://www.youtube.com/watch?v=1dYAYBNU6qM&autoplay=0. The behavior does not appear to have changed. It starts immediately, but sound is muted.
How, with twentyseventeen, do I have an option of a media file that starts paused, and begins to play, with sound, if the user hits the 'Play' button?

You can use global object wp for get access to youtube player functions. Youtube video in twentyseventeen theme loads wp-custom-header.js file and creating new object in 384 line.
Here is some solution you can use:
var ww_timer = setTimeout(function ww_video() {
if(wp.customHeader.handlers.youtube.player == null){
ww_timer = setTimeout(ww_video, 50);
}else {
if(typeof wp.customHeader.handlers.youtube.player.unMute === "function") {
wp.customHeader.handlers.youtube.player.unMute();
wp.customHeader.handlers.youtube.player.stopVideo();
}else{
ww_timer = setTimeout(ww_video, 50);
}
}
}, 50);
This code goes to my_js.js file( I created it in the main directory of active child theme. You can add this code to another .js, if you have it ) of your active child theme. Also, we need to update functions.php file using this code:
function ww_youtube_functions(){
wp_enqueue_script('ww_youtube_video',get_stylesheet_directory_uri().'/my_js.js',array('wp-custom-header'),false, true);
}
add_action('wp_enqueue_scripts', 'ww_youtube_functions');
Required part of this code is array('wp-custom-header'): enqueue script with dependence with script wp-custom-header.
setTimeout is not best way. I believe, that it can be done with more elegant code.
But its tested and working.

Loading multiple videos in one page

I am getting 40 videos on load of page and using foreach loop for displaying, below is my html code of displaying video
<div id="videosList">
<div class="video" data-id="{{$i}}">
<div class="videoSlate">
<video id="videoDiv{{$i}}" class="thevideo"
preload="metadata"
poster="/{{$postDetails->video_thumbnail}}" loop>
<source src="/{{$postDetails->videos}}">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
and on mouseover to video i am playing the video and on mouseout i am stopping the video here is the javascript code for play and pause
<script>
var figure = $(".video");
var vid = figure.find("video");
[].forEach.call(figure, function (item) {
item.addEventListener('mouseover', hoverVideo, false);
item.addEventListener('mouseout', hideVideo, false);
});
function hoverVideo(e) {
$('.thevideo')[$(this).attr("data-id")].play();
}
function hideVideo(e) {
$('.thevideo')[$(this).attr("data-id")].pause();
}
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
each video size is not more than 6 mb, now the problem is for loading page it will take around 1 min, and for playing video on hover it will take around 15 to 20 seconds to play, is there any way to reduce the loading time and video playing time. I am using laravel framework, in local its working but in server it giving problem.

I don't know why you need 40 videos in the same page, but I would not at all recommand that:
YOUTUBE:
Youtube doesn't display 20 videos per page, but 20 placeholder images that are used as link to click on in order to display the video. It is pretty UX friendly, since loading time is considerably reduced (images instead of videos) and users can choose what they load.
FACEBOOK, TWITTER, ETC...:
Social networks such as Facebook, Twitter, etc are using a scroll script, which loads videos only when they are visible by the user. This means that if there are 100 videos on the page, only one or two will be loaded and displayed, because this is useless to load stuff that the user can't see (even more if this is a heavy file, such as a video). This can be done with Javascript or jQuery (Here is a pretty cool question which gives you a solution).
I really recommand you to choose one of those two approach, since I can't figure out a case which requires to display 40 videos on one page with one load.

Security Error while trying to play a sound in Firefox add-on?

I'm new to Firefox add-on development, and I have a problem while trying to play a sound in my add-on.
It's an add-on for timekeeping. Users can configure meetings settings (duration, participants... etc) through a Panel. There is a toolbar. It contains several buttons (Start, Next, Stop, Add Participant) and a Frame (to display how many participants haven't speaked yet). I change the document.border.style property from "green" to "red" as timers countdown.
This works fine. But I was asked to make my add-on play a sound when the document.border.style property turns "orange" and then "red" and I can't make it works.
I have tried several things :
1-Adding a property/attribute (I don't know which term is the right to use in that context, maybe both, anyway) to my TimeKeeper variable for each sound that has to be played. Meaning in my code :
orangeBorderStyle: new Audio(relativePathToMyMp3orWAVFile),
redBorderStyle: new Audio(relativePathToMyMp3orWAVFile),
and then calling their play() method in the countdown() method. But it didn't work.
2-Currently, I'm trying to play the sounds from HTML5 audio tags I added to the frame.url HTML file. But it doesn't work either.
The HTML file looks like this :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Frame</title>
</head>
<body>
<script type="text/javascript" src="../javascript/Frame_script.js"></script>
Speakers Left : <input id="speakers" size="4" value="" disabled />
<audio id="orangeSound" src="Audio/orangeBorderSoundTest.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio id="redSound" src="Audio/redBorderSoundTest.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
In Frame_script.js I have :
window.addEventListener("message", reactToMessages, false);
var orangeBorderSound=document.getElementById("orangeSound");
var redBorderSound=document.getElementById("redSound");
//console.log(orangeBorderSound);
function reactToMessages(e){
if(isNaN(e.data)==false){
displaySpeakersLeft(e);
}
if(e.data=="orangeBorderSound")
{
document.getElementById("orangeSound").play();
//console.log("Je joue le son Orange.");
} else if(e.data=="redBorderSound")
{
document.getElementById("redSound").play();
//console.log("Je joue le son Rouge.");
}
}
function displaySpeakersLeft(e){
document.getElementById("speakers").value=e.data;
}
and in Timers.js I have the following calls :
Frame.get().postMessage("orangeBorderSound", Frame.get().url);
Frame.get().postMessage("redBorderSound", Frame.get().url);
Both calls trigger the right code (when the console.log() are commented out, they are displayed correctly) but there is no sound in the end.
Please, note that the value of the input tag with ID "speakers" is correctly displayed in my add-on so it seems that the document.getElementById() methods returns the right thing, and that it is the right way to do things with an input tag. Meaning, the paths are the right ones. I can't see why it would be different with audio tags.
So here comes my question : I now see the error "Security Error: Content at moz-nullprincipal:... may not load or link to resource..." (the resource path given seems to be the right one for each audio file) in the Error Console.
Is this really a security issue ? Or would I have little to change to make my code works ? What would you do ?
Any explanation or suggestion would be appreciated. I really don't see what's wrong with what I've done. Why would it cause security problems ?
Please, note that I've tried to use the audio tags method in a new add-on with just a Play button in the Panel and nothing else, but this time with the audio tags in the Panel contentURL HTML file, calling the play() method in the contentScriptFile and it worked.
No security error this time.
But I suppose I can't accept such a solution in my timekeeping add-on since I need to synchronize the call of the play() method with the change of the border style and that there is no Play button this time. It does not correspond to what I want to obtain. It was just for testing purpose.
Timers.js which is in my lib directory cannot interact with the Panel contentScriptFile which is in the data directory, so it couldn't be a solution even if the sounds were correctly loaded and ready to be played.
What do I get wrong ?

SublimeVideo JavaScript

I've been using SublimeVideo, and I've done so much with it already for the site I'm working on.
I've got 15-20 videos that I'm successfully using via SublimeVideo on a site in the basic way, by having a link on the page the user clicks on, and when clicked, the video opens in the SublimeVideo lightbox and starts playing.
But now, I'm needing to create "shorter URLs" for these videos that can be sent out in print publications and emails, and where the user is taken to the website to view, not just the video file.
Ideally, I was hoping to just use the id/data-uid with a hashtag in a single-page url and have the chosen video to automatically launch'n'play within the lightbox. That seems to be impossible (?).
I could settle with having a single page with the video tags hidden and have the hashtag unhide it and play it when in the URL. If none of this can work in a slick way, maybe I'll just go old-school and make a page for each video and just embed it in the page..
Anyway, after scouring all the documentation pages, their forums, and searching the web, I've only found a couple of options - neither of which have actually worked. I'll paste them below:
First, here's an example of the HTML I'm using for all the videos:
<p class="">video1 text link on page</p>
<video id="video1" data-uid="video1" title="video1 description" poster="/assets/images/video1.jpg" width="1084" height="574" style="display:none" data-autoresize="fit" preload="none">
<source src="/assets/videos/video1.mp4" />
</video>
That, by itself, works great! I don't want to change that. When the text link is clicked, the lightbox opens and the video plays perfectly.
So, let's say the page that holds the 15-20 videos with the above code for them is at:
http://example.com/resources/index.php
I thought I could simply make that URL for the first video:
http://example.com/resources/index.php#video1
...or even better...
http://example.com/resources#video1
...and follow suit for all the other video IDs.
And to get that to work, I've tried:
<script type="text/javascript">
sublimevideo.ready(function()
{
if (window.location.hash == '#video1') {
sublime('video1').play();
} else
if (window.location.hash == '#video2') {
sublime('video2').play();
} else
if (window.location.hash == '#video3') {
sublime('video3').play();
}
});
</script>
...that doesn't work. For some reason it works with whatever the first video is on the page, but by "work" I mean, it unhides it and makes it playable, not open in the lightbox and auto play.
So then I found code in the sharing documentation area like this:
<script type="text/javascript">
var hashtag = "#video1";
var hashtag = "#video2";
var hashtag = "#video3";
if (document.location.hash == hashtag) {
showTheVideo(hashtag);
}
function showTheVideo(hashtag) {
}
</script>
...but that doesn't work either.
Could somebody that does know JavaScript please spell it out for me?

I'll put the code that fixed the issue for me here in hopes it helps somebody else someday that may search and find it.
By putting the below code in the head of the page, under the...
<script type="text/javascript" src="//cdn.sublimevideo.net/js/UniqueIDprovidedInYourAccountGoesHere.js"></script>
...library (which is the random characters/numbers .js that SublimeVideo gives you in your account area), I was able to finally get the above detailed problem to work (YAY!!!).
So, using the same example as above, this URL now works as I needed (by not only taking you to the resources page, but also by launching the particular video in its lightbox).
http://example.com/resources.php#video=interview2
...and by putting:
RewriteRule ^resources$ resources.php [L]
...in the .htaccess file in the same dir, I was able to make it even easier for the user:
http://example.com/resources#video=interview2
As I understand it, the below JavaScript addition finds the hash, then looks for the "video=", then takes whatever is after that, and if it finds a matching "id" in an "a" tag, then it tells it to do it's SublimeVideo thing by launching that video in the lightbox. Brilliant!
<script type="text/javascript">
$(document).ready(function () {
var lochash = location.hash.substr(1);
var mylocation = lochash.substr(lochash.indexOf('video='))
.split('&')[0]
.split('=')[1];
sublime.ready(function () {
var lightbox = sublime.lightbox(mylocation);
lightbox.open();
});
});
</script>
Here's the HTML part (for reference):
<p class="">video2 text link on page that i left as reference for the user in case they close the video that was launched from the publication</p>
<video id="video2" data-uid="video2" title="video2 description" poster="/assets/images/interview2.jpg" width="1084" height="574" style="display:none" data-autoresize="fit" preload="none">
<source src="/assets/videos/interview2.mp4" />
</video>
Also note: I found out through trial and error that the name of the video in the URL, after the "#video=" must be the same as the "ID" in the "A" tag, not the "video" tag! So, you'll notice that the "id=" is (and needs to be) different between the two. The "id=" in the "video" tag is instead the same as the "href=".

How do I check if popcorn js fails to load a YouTube video?

I'm loading a YouTube video into popcorn.js. How do I check to see if it fails to load?
This is my current code:
document.addEventListener("DOMContentLoaded", function () {
// Create a popcorn instance by calling the Youtube player plugin
var example = Popcorn.youtube(
'#video',
'http://www.youtube.com/watch?v=Zm1c2WTD93w&rel=0'
);
}

As you can see on popcorn's media events page, they have an error event. You can find out how to handle it in on the utility methods page.