I'm trying to pause every instance of an HTML 5 <video> tag on a page after an event is fired using:
jQuery("video").each (function() { this.pause(); })
Works in all browsers EXCEPT Safari for Windows 5.1.7, which throws:
TypeError: 'undefined' is not a function (evaluating 'this.pause()')
Why do Safari throws this exception and how can I avoid it?
edit:
so, given you are using video.js, maybe something like this?
jQuery("video").each (function() {
_V_($(this).id).pause(); //make sure all your video tags have an id attribute
});
https://github.com/zencoder/video-js/blob/master/docs/api.md
Related
UPDATE (July 2020): I was able to get a mostly working version of this. See my answer to the related question here.
In my angular Nativescript iOS app, I have a webview set up to play youtube videos. Following a method similar to this question here, I can get the youtube video to load and play automatically, using the Youtube Iframe API. But how do I detect when the video actually starts playing (after it is loaded)?
The Iframe API has events for this purpose, like "onStateChange". But, because my youtube code is "stuck" inside the webview, I am currently not able to read when events are fired from that webview.
In Nativescript, there is a nativescript-webview-interface plugin for this purpose, but I can't get it to work. I have put my code below. If that is the way to go, what is the correct code to get it working?
(I don't want to use the nativescript-youtube plugin because that brings in youtube's quotas, which are regularly shrinking. )
Code I Have Tried:
To get the youtube player to activate, I have put all of the relevant youtube code inside the webview. That works to play the video, but not yet to get the event of when the player starts playing. To do what I want to do, I need to have some way of inserting that code into my app WITHOUT trapping it in the webview. Or, have some way of communicating inside the webview.
To try to communicate with the webview, I have tried the nativescript-webview-plugin:
$ tns plugin add nativescript-webview-interface
html:
<web-view src="{{youtubeCode}}" #webView ></web-view>
ts:
import {WebView, LoadEventData} from "tns-core-modules/ui/web-view";
let webViewInterfaceModule = require('nativescript-webview-interface');
...
export class ...{
#ViewChild('webView') webView: ElementRef;
public youtubeCode = [code that youtube provides in its IFrame API]
ngOnInit(): void {
this.setupWebViewInterface();
}
setupWebViewInterface() {
let webView: WebView = this.webView.nativeElement;
this.oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');
this.youtubeListen()
}..
youtubeListen(){
this.oWebViewInterface.on('onStateChange', (eventData)=>{ //'onStateChange' is the event provided in the Youtube Iframe API
console.log('event data = ' + eventData) //***this is the key part I want to work.
});
}
RESULT: ERROR TypeError: undefined is not an object (evaluating 'this.webView.ios.constructor')
This is a problem in the plugin's index.ios.js file. If I comment out the offending line, then the errors go away, but then nothing happens
..
I'm using a custom Modernizr build, v3.3.0. I've created a simple JSFiddle example to illustrate: https://jsfiddle.net/cqkg7x45/6/.
console.log(Modernizr);
will show the Modernizr object, and when I inspect it in the JS console I can see "videoautoplay" is a property with a value of "true".
But, when I do
console.log(Modernizr.videoautoplay)
it returns "undefined".
I was originally seeing this issue in a WordPress theme I'm developing, but was also able to recreate in JSFiddle and a separate stand-alone HTML page. Also, Modernizr is putting the "videoautoplay" class on my HTML tag, even when I know the device does not support that feature (iPhone 5).
Update: This issue appears to be happening in Chrome (v47.0.2526.106), but not Firefox (v43.0.2).
I'm going to answer my own question in case anyone else runs into this problem. I found the solution on this SO post: How do I detect if the HTML5 autoplay attribute is supported?.
Since this is an "async" test you can't access the property using the syntax
Modernizr.videoautoplay
You have to use the .on() function, as shown in the above SO post:
Modernizr.on('videoautoplay', function(result){
if(result) {
alert('video autoplay is supported');
} else {
alert('video autplay is NOT supported');
}
});
I have been using the hammer.js and jquery.hammer.js. In hammer.js i'm getting the addEventListesener error that is in chrome browser.
And the version which i'm using is 1.0.6, both hammer.js and jquery.hammer.js.
If any one faced this kind of error, please let us know it.
thanks
I had this same issue and after some research I figured it out. You need to download the jquery plugin from hammers GitHub.(https://github.com/hammerjs/jquery.hammer.js)
If your using it for a swipe feature you code should look something like this...
$(".element").hammer().on("swiperight", function(){
//code her
});
Facing multiple issues with IE 8 (detailed version 8.0.7601.17514). Please note everything works fine in other browsers.
Yammer embed my feed control is not working. Sometimes it shows result and sometimes not.
REST API call not working and giving error as below. However I used new js sdk and new yam.platform.request.
Error is : yam.request is null or not an object. source : platform_js_sdk.js
Thanks in advance for your help!
I found out that the div that you embed yammer feed has to be above the yammer request script
eg.
<div id="embedded-feed" style="height:400px;width:500px;"></div>
<script>
yam.connect.embedFeed(
{ container: '#embedded-feed',
network: 'fourleaf.com' // network permalink (see below)
});
</script>
Otherwise, IE will not be able to find the div to show the feed (but chrome works fine..)
I'm trying to write an add-on for firefox and i'm having a problem-
When the user right-clicking on the page the add-on is adding an element to the page's body using
document.body.appendChild(myElement);
myElement has a button and i want that "onClick" it will call a xmlHttpRequest and handle the response in some why. I've tried to inject the two scripts using
document.getElementsByTagName('head')[0].appendChild(xmlRequestFunction);
document.getElementsByTagName('head')[0].appendChild(handleResponseFunction);
but it didn't work because of (i assume) a security problem.
What can i do?
Thanks
Do not use onclick when working with content, use addEventListener instead (see https://developer.mozilla.org/en/XPCNativeWrapper#Limitations_of_XPCNativeWrapper if you need to know why). Like this:
myElement.addEventListener("click", function(event)
{
var request = new XMLHttpRequest();
...
}, false);