I have a .html file in my project that I call when I initiate my UIWebView in order to autoplay a Youtube video. It looks something like this:
<html>
<head>
<script src="https://www.youtube.com/player_api"></script>
<style>
body, div {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="media_area"></div>
</body>
<script>
var ytPlayer = null;
function onYouTubePlayerAPIReady() {
ytPlayer = new YT.Player('media_area', {height: '200', width: '320', videoId: '9bZkp7q19f0',
playerVars: {'playsinline': 1},
events: {'onReady': onPlayerReady}
});
}
function onPlayerReady(e) {
e.target.playVideo();
}
</script>
</html>
As you can see it has the videoId hardcoded in there, so to speak. Is there a way I can have that be a variable and call it from my viewController? Something like
HTMLFilewithVideo: vidID;
Or maybe there's a better way to do this?
Thanks!
You can manipulating the javascript after the page loads by using the same technique that #samir suggested and put it in your webview delegate's method.
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
[webView stringByEvaluatingJavaScriptFromString:#"var ytPlayer = null;function onYouTubePlayerAPIReady() {ytPlayer = new YT.Player('media_area', {height: '200', width: '320', videoId: '9bZkp7q19f0',playerVars: {'playsinline': 1},events: {'onReady': onPlayerReady}});}function onPlayerReady(e) {e.target.playVideo();}"];
}
I'm not sure if the javascript like that will work as suggested (I just copied it blindly), but that's one method of doing what you want through a webview.
Yes you can do this by JavaScript function and then call this function with your UIWebView. something like this :
function javaScriptFunction {//Here you can access the html DOM and pass it the URL }
Then in your objective c code, you can call it with the UIWebView methode :
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script
Related
I am designing an experiment making people watch a youtube video and I would like to keep them from controlling or stopping the video.
Also, it seems I can't use css since I am using a basic experiment software called Qualtrics.
I tried iframe "controls" and "disablekb" options but they didn't work. Also, "hideControls" doesn't work.
In the html (Qualtrics), I added
this simple html code and then I typed most codes in javascript:
var videoId = 'vpTHi7O66pI';
var hideControls = true;
// This code loads the IFrame Player API code asynchronously
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
if (hideControls) {
hideControls = 0;
} else {
hideControls = 1;
}
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: videoId,
events: {
'onReady': onPlayerReady,
},
playerVars: {
autoplay: 1,
modestbranding: 1,
rel: 0,
disablekb: 1,
enablejsapi: 1,
showinfo: 0,
controls: 0
}
});
}
function onPlayerReady(event) {
player.contextmenu(function() {
return false;
});
player.setPlaybackRate(1.25);
player.loadVideoById({'videoId': videoId,
'suggestedQuality': 'large'});
event.target.playVideo();
}
window.setTimeout(function() {
onYouTubeIframeAPIReady();
}, 1000);
I expect mouse clicking doesn't lead to pausing the video but it pauses.
Try adding the pointer-events: none; CSS property in an inline style element on the player's encapsulating element.
For example, in your HTML you can use:
<style>#player {pointer-events: none}</style>
You could add a transparent overlay over the player itself, like a div, then stop the click event when it happens in there (could be with CSS, setting it's pointer events as pointer-events: none).
I have the most awesome answer if you're flexible about a JS solution - CSS can actually do this:
#container_id {
pointer-events: none;
}
Now the mouse won't interact with the controls at all (hover or click)
Edit: If JS is a requirement:
document.getElementById('container_id').addEventListener('click', function(event){
event.preventDefault()
}
Final edit: Sorry, did not read as carefully as I should :(
Looks like you are loading the player markup into var player - you should be able to add the prevent default onclick directly to that var as such:
player.onclick = function(event){ event.preventDefault() }
Good luck!
In response:
Each approach mentioned above was a different option, the middle one supposes access to the DOM, but I'm starting to sense you can't directly manipulate it based on what you've said - so I recommend the last implementation, I would try either of these:
Under:
player.setPlaybackRate(1.25);
player.loadVideoById({'videoId': videoId,
'suggestedQuality': 'large'});
Add:
player.onclick = function(event){ event.preventDefault() }
Or:
event.target.onclick = function(event){ event.preventDefault() }
I like the first one better for readability, but they might both work, without more info about the [ YT.Player ] (I assume a library you're using) I can't be sure the object bound to [ var player ] will allow it's onclick to be modified (some libraries include measures to prevent things like that) - so I include option 2 as a fallback - let me know if that doesn't work because there are other event binding options...
The CSS approach at the top is your last ditch effort, it would solve the problem on it's own, no need for any of the JS. It would be added between the
<style> and </style>
tags in the documents head, like so:
<head>
[ STUFF ]
<style>
#[THE_ID_OF_YOUR_CONTAINER] {
pointer-events: none;
}
</style>
</head>
or included in a stylesheet - likely named [something].css on your server as just:
iframe {
pointer-events: none;
}
I know this is an old thread, but recently ran into the same problem. I am trying to show a video as part of an experiment on memory. The plan is to record button presses, so it would be tricky with the timing if viewers can pause the video.
The video is hosted here: https://muse.ai/docs#embed-player,
which should in theory allow me to implement the solutions above. However, the movie is still pausable on a mouse-click.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no">
<style>
#container-name{
pointer-events: none;
}
</style>
<script src="https://muse.ai/static/js/embed-player.min.js"></script>
<script>
</script>
</head>
<body style="width: 840px; background-color: grey;">
<div id="container-name" ></div>
<script src="https://muse.ai/static/js/embed-player.min.js"></script>
<script>
const player = MusePlayer({
container: '#container-name',
video: 'zT4Vmcc',
width: 800,
autoplay: true,
style: 'no-controls',
});
event.target.onclick = function(event){ event.preventDefault() }
</script>
</body>
</html>
As you can see I tried to implement two of the solutions above. Any input would be apprechiated.
I was able to solve this with this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no">
<style>
</style>
<script src="https://muse.ai/static/js/embed-player.min.js"></script>
<script>
</script>
</head>
<body style="width: 840px; background-color: grey;">
<div id="container-name" ></div>
<script src="https://muse.ai/static/js/embed-player.min.js"></script>
<script>
const player = MusePlayer({
container: '#container-name',
video: 'zT4Vmcc',
style: 'no-controls',
logo: false,
search: false,
title: false,
autoplay: true,
shortcuts: false,
css: '*{pointer-events:none!important;}',
});
</script>
</body>
</html>
Which is also what juandxce suggested, thanks!
I am trying to create a zoom effect when mousing over a youtube player (iframe) .
Currently I am using the YouTube IFrame Player API to construct the player and triggering an onmouseover event listener to adjust the size of the player upon mousing over the player. And it doesn't seem to be working.
http://plnkr.co/edit/TOtWD9?p=preview
function zoom() {
player.setSize(width=200, height=150);
}
document.getElementById('player').addEventListener('onmouseover', zoom);
Any ideas on how to get this running or other approaches?
I clicked the plnkr link that you provided and picked up on a couple of issues that you have with your code, hence you are failing to achieve the anticipated / desired results:
I modified your code as follows:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="playerHolder"></div><div id="player">stage1</div>
<script src="script.js"></script>
</body>
</html>
Feedback:
Unless you know what you are doing, in terms of what to do with js when certain things have happened ( "load order" ), put js last as you are not doing a check if the DOM element ( "player / playerHolder") has loaded before you bind it to any events. This helps prevent errors relating to undefined / null objects being bound to events.
css:
/* Styles go here */
body { width: 100%; height: 100%; }
#playerHolder{
border:2px solid red;
height:100%;
width:100%;
position:absolute;
}
Feedback:
The reason for what I did ( may not be the only way to do it ) is to set perspective "over" the YouTube embed. Note that, as far as I know, you cannot modify third party code from your server, in other words, unless there's a API function that allows you to add custom code, such as you binding a hover event onto the YouTube player, you can't just do it.
js:
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'SjOLOfyn95U',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
//setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
function zoom() {
player.setSize(width=200, height=150);
}
document.getElementById('playerHolder').addEventListener('mouseover', zoom, false);
Feedback:
1) You targeted the Video embed itself, which I explained the issues relating to that on the css section above.
2) You used 'onmouseover', which I replaced with 'mouseover'
I hope this helps solve your problem.
im trying to get a youtubevideo loaded in an IFrame, but it just wont work. Am I missing something here?
addVideo.addEvent('click', function() {
link = ytlink.get('value');
src = new URI(link);
if(src.get('host') == 'www.youtube.com') {
var videoFrame = new IFrame({
url: 'http://'+src.get('host')+'/embed/'+src.get('data').v,
styles: {
width: 490,
height: 276
},
events: {
onLoad: function() {console.log('fertich');}
}
});
container.grab(videoFrame);
}
addVideo is a link and i was lucky using the grab method til until now.
What is going wrong here? Anything apreciated.
edit: i want the youtube player to show up in the IFrame, but there is nothing in there (though an IFrame element is rendered into the page). Even not if i set url to http://www.google.com/.
This is the IFrame element created:
<iframe url="http://www.google.de" style="width: 490px; height: 276px; " name="IFrame_haxso5aq" id="IFrame_haxso5aq"></iframe>
cheers!
is iFrame attribute you need not 'src' instead of 'url'?
var videoFrame = new IFrame({
src: 'http://'+src.get('host')+'/embed/'+src.get('data').v,
styles: {
width: 490,
height: 276
},
events: {
onLoad: function() {console.log('fertich');}
}
});
I know this has to be totally ghetto, but I'm trying to figure out how to get a feed of my youtube links to display on my homepage in a somewhat stylish fashion. I get tired of having to post something on youtube, then create a post on my website that is basically a duplication of the youtube post. Perhaps there is already something out there that has this functionality built in, but so far I haven't seen it. I have a couple questions about what I'm trying to accomplish thus far:
How can I update my code so I can use 'this' in my youTubeMe object verse having to reference the variable name. I'm pretty sure I understand why I can't use it how I'm doing it currently, but I don't know how to fix?
Second, the google api seems a bit weird to me. I'm not too stoked about using iFrames and the split operation I have to do in order to get the VideoId can't be correct.
Any advice would be greatly appreciated. I'll post the code, but you can also find a working example here
HTML:
<div id="pager">
</div>
<div id="player">
</div>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubePlayerAPIReady() {
youTubeMe.init();
}
</script>
JAVASCRIPT:
var youTubeMe = {
pageSize: 10,
player: null,
startIndex: 1,
username: 'google',
init: function() {
$.getJSON('http://gdata.youtube.com/feeds/users/' + this.username + '/uploads?alt=json&start-index=' + this.startIndex + '&max-results=' + youTubeMe.pageSize, youTubeMe.createYouTubePlayers);
},
createYouTubePlayers: function(data) {
$('#player').empty();
$('#pager').empty();
if (data.feed.entry.length < youTubeMe.pageSize) {
youTubeMe.createPreviousButton();
} else {
if (youTubeMe.startIndex !== 1) {
youTubeMe.createPreviousButton();
}
youTubeMe.createNextButton();
}
for (var i = 0; i < data.feed.entry.length; i++) {
player = new YT.Player('player', {
height: '195',
width: '320',
videoId: data.feed.entry[i].id.$t.split('/')[5]
});
}
},
createNextButton: function() {
$('<a id=\"next\" href=\"#\">next</a>').appendTo('#pager');
$('#next').click(function(e) {
e.preventDefault();
youTubeMe.startIndex += youTubeMe.pageSize;
youTubeMe.init();
});
},
createPreviousButton: function() {
$('<a id=\"prev\" href=\"#\">prev</a>').appendTo('#pager');
$('#prev').click(function(e) {
e.preventDefault();
youTubeMe.startIndex -= youTubeMe.pageSize;
youTubeMe.init();
});
}
};
CSS:
iframe { margin: 20px; }
#pager { background-color: #666; line-height: 3em; text-align: center; }
#pager a { color: #fff; font-size: 1.8em; margin: 0 15px; }
The way you should go is create a closure and have everything contained in that. You can do it like this:
//a closure function that calls itself
(function(){
//with var it would be private and not accesable like this:
//youTubeMe.pageSize
var pageSize = 10;
//declare a global reference to the youTubeMe object
var youTubeMe = window.youTubeMe = function(){
};
//with youTubeMe.* it is accessable from anywhere in your page
//you can either
//declare a public variable like this
youTubeMe.player = "youtube player";
//or a public method like this
youTubeMe.foo = function(){
//this "this" here is your youTubeMe object
console.log(this);
bar();
};
//like the private variable at the top, this function is private
//and can only be called from inside the youTubeMe object
function bar(){
//this "this" here is the window
console.log(this);
}
})();
console.log(youTubeMe.player); //out puts youtube_player
youTubeMe.foo(); //outputs the youTubeMe object
youTubeMe.bar() //throws an undefined error
As for the youtube api; I've always found it to be really good. I've never used the iframe embed just because "iframe embed" sounds not right to me. If you use the youtube api you have two options: Embedded player or the chromeless player. Take a look at the embedded player because unless you want to build a custom skin for your player, its the way to go. Creating a playlist becomes easy when you use the api because you let javascript do all the playing and playlist stuff.
Hope that helps.
I want to have my overlay adjust in size depending on how much content is being shown in the flash movie. Also, I want it to resize in real time when the user adjusts the content.
Is it possible?
Sure, Flash can call methods in Javascript using ExternalInterface. The syntax is pretty simple, say in Javasacript you have:
function methodInJS(name) {
alert("Hello to " + name);
return 17;
}
Then in Actionscript you would call:
var myName:String = "David";
var result:Number = ExternalInterface.call("methodInJS", myName);
trace("Result from JS call is: "+result);
Yes, use ExternalInterface
In you HTML set up your shadow box like this:
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
skipSetup: true
});
function openShadowbox(content, type){
Shadowbox.open({
content: content,
player: type,
title: "Welcome",
height: 350,
width: 350
});
};
</script>
Then in your ActionScript:
if(ExternalInterface.avilable){
try{
ExternalInterface.call("openShadowbox", "<h1>Welcome to my website!</h1>", "html");
}catch(error:Error){
trace(error);
}
}