Develop Reference

Javascript/jQuery - Changing object data attribute doesn't stop video playing in Chrome

I have an object like below:
<object data="black.html" width="100%" class="vidlink vid1link"></object>
I am then using the following code to load a youtube video:
$(".vid1link").attr("data", "https://www.youtube.com/embed/MhKxm_G6FRw?autoplay=1");
This works great. But then I want the user to "close the video". The following code triggers the data attribute to change to a black page:
$(".vid1link").attr('data', 'black.html');
This works in fine on Firefox and IE/Edge. But on chrome the video continues to play. I have checked the elements in the console, and it is successfully replacing the data with black.html, but it still continues to play the video, as mentioned, only in Chrome.
Is this a known bug or normal chrome behaviour?
Many thanks
EDIT: For now I have found a work around by sending a pause request to the youtube video:
Add the following to the youtube link: enablejsapi=1
this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
Although - this doesn't seem to work if there are multiple videos on the page.

$('.vid1link').replaceWith('<object data="black.html" width="100%" class="vidlink vid1link"></object>');
You need to remove completely old element before replace the attribute

document.getElementsByClassName(".vid1link").setAttribute('data', 'black.html');

Dynamically loaded <video> not playing in Safari and iOS Safari

I cannot get a video to work on my page. The projects are loaded dynamically, and if a video is contained it loads fine on Chrome but not in Safari. When I inspect it, Safari gives the following error for the video:
"An error occurred trying to load the resource"
Is there any way I can get this to work. I tried looking at the different properties in , but nothing seems to work.
The page can be seen here:https://www.proptogroup.com/projects.html
the project with the video is the first one loaded after current projects.

webkit mediagroup seeks to the end when .pause() is called in chrome

I'm trying to use webkits mediagroup (link to apple developer guide pdf, see page 42) to sync two html videos but it keeps giving me a headache. The MediaController doesnt seem to be working properly. In chrome the video seeks to the end of the video every time I call .pause(). Here is what the setup looks like.
(I only used one video here, but the result is the same if you use two videos and set the same controller on both of them)
HTML
<video id="video" src="http://videos.mozilla.org/serv/webmademovies/popcorntest.mp4"></video>
JS
videoController = new MediaController(),
video = document.getElementById('video');
video.controller = videoController;
$('#somebutton').on('click', function() {
videoController.pause();
});
Here is a fiddle. (In safari this fiddle works if you set the "autoplay" attribute on the video, otherwise the video wont play.)
According to Apples guide (referenced above) this is one of the two ways to set it up. The other way is to set a mediagroup="videoController" directly on the video tag and then access the controller with document.getElementById('video').controller. I tried both with the same result.
Is this a bug in Chrome or is it not just implemented the same way as in Safari? Seems too odd to be intended.

It's a bug in chrome. Here is the issue.

Youtube iFrame API events not firing on Firefox 14

I'm currently working on embedding a youtube video using the iframe API, what is annoying me is that the events are not firing only on Firefox (I have just tried firefox 14), they work on every other browser (obviously not using browsers from hell like IE7).
The samples from their documentation don't work either, if you grab the piece of code they have under the getting started section of this page and here is the jsfiddle version for your quick view.
The player is displayed on the page, but as I mentioned the events are not working, neither I can use any function from the api, they all throw undefined error.
I appreciate any help.

Ok I found the problem,
It's because of the Firefox Extension HTTPS-Everywhere, which is switching the requests to use https, and since my page is requested using http, that was causing a conflict with the youtube iframe requests.
I believe I should put a warning on my site about using that plugin. Thanks for your help everyone.

I had once a problem with plying events to the iframe and it also apeared only in Firefox.
The answer was to specify the id and name of the iframe to the same value.
Try it - it might work for you as well.

using javascript to play audio just on iPad

Rather than repeat a long javascript for playing audio, here is the link: webpages.charter.net/jolove/Includes/play_song.js:.
This plays for any desktop browser (Mac or Windows), but not for my iPad.
Here is the calling website: webpages.charter.net/jolove/Escort_Folder/Dedication_Poem_iOS.html
This is really bugging me, so I would definitely appreciate any help on this, any help at all.
John Love

Not sure exactly what your question is, but you can use the HTML5 <audio> tag which is supported by the iPad. Check out http://developer.apple.com/safaridemos/audio.php or just google "HTML5 audio".

I'm almost forced to conclude that iPad will not play audio files.
Here is a very fresh site, where I use
the audio. But, this time, I got a button that says "cannot play audio file". For the sake of completeness, here is the included webpages.charter.net/jolove/Escort_Folder/js/play_song.js