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!
Related
We're trying to offer the ability to switch between different video bitrates using the resolution switcher plugin (https://github.com/kmoskwiak/videojs-resolution-switcher) for a video.js player.
Here is a demo page with basic setup to run videojs player in flash mode: jsbin (click on 'edit in jsbin on your top right to see the actual code)
The plugin works correct in HTML5 (DASH and HLS) streaming but fails in Flash mode. The player will start playing with default bitrate value ('1080p' in this case) without any issues. The problem occurs when you actually switch the bitrate. If you select to change to a different bit-rate the player will stop playing. No browser console errors, player will not crash, just freezing. Seems like the player even doesn't sent the actual http request to get the new video source. Sometimes plugin even can actually switch the source, but it's happened just few times and randomly. In other words the behavior is way unstable and not acceptable.
Plugin provides resolutionchange event which should be fired when resolution is changed, but it's not. Only UI changes are visible.
I'm really appreciate on any help or ideas on how this behavior can be fixed!
Also including it here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="http://vjs.zencdn.net/5.16.0/video-js.css" rel="stylesheet">
<style>
.video-js { background-color: black; }
video { width: 100%; height: 100% }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.16.0/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.1.0/videojs-contrib-hls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.4.0/dash.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.7.1/videojs-dash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-resolution-switcher/0.4.2/videojs-resolution-switcher.min.js"></script>
</head>
<body>
<video id="player" class="video-js vjs-default-skin" width="450" height="250"></video>
<script>
videojs('player', {
preload: 'auto',
autoplay: true,
techOrder: ["flash"],
controls: true,
plugins: {
videoJsResolutionSwitcher: {
default: 1080,
dynamicLabel: true
}
}
}, function(){
handleReady(this);
});
var sources=[
{src:"rtmp://stagingmedia.livecoding.tv/livecodingtv/1080p_irwanbd?t=FDD4A16B14C34359A8677A339962B60D",label:"HQ",type:"rtmp/mp4",res:1080},
{src:"rtmp://stagingmedia.livecoding.tv/livecodingtv/720p_irwanbd?t=FDD4A16B14C34359A8677A339962B60D",label:"Medium",type:"rtmp/mp4",res:720},
{src:"rtmp://stagingmedia.livecoding.tv/livecodingtv/480p_irwanbd?t=FDD4A16B14C34359A8677A339962B60D",label:"Low",type:"rtmp/mp4",res:480}
];
function handleReady(player) {
window.player = player;
player.updateSrc(sources);
}
</script>
</body>
</html>
var player = videojs('video', {
controls: true,
muted: true,
width: 800,
plugins: {
videoJsResolutionSwitcher: {
ui: true,
default: '< default_res >', // Default resolution [{Number}, 'low', 'high'],
dynamicLabel: false
}
}
},
function() {
player.updateSrc([ < sourcetags > ]);
player.on('resolutionchange', function(){
player.play();
console.info('Source changed to %s', player.src());
})
I am trying to debug a case where all sprites that have the hand cursor turned on do not actually display them properly.
When you hover, the cursor does not change
When you click down, the hand cursor still fires.
Down events still fire but I think over/out events are not firing
There are no errors/warnings for the game in the console.
Same thing happens in a few browsers
Since this project is a derivative of another project where the cursor works, I'm trying to slowly step back my code but not really having luck so far with that. So trying to drum up ideas on how to figure this out.
Edit
Since this happened again, on another project I thought I would post up code. I boiled this down to a very simple game and it still happens. This is with Phaser 2.4.8 and Pixi v2.2.9.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
body {
margin: 0;
padding: 0;
background: #000;
}
canvas {
margin: 0 auto;
}
</style>
<script src="./assets/js/phaser.min.js"></script>
<script>
var game = new Phaser.Game(2280, 1440, Phaser.CANVAS, '', {
preload: function() {
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.load.spritesheet('help', 'assets/img/help-button.png', 130, 130);
},
create: function() {
var help = game.add.sprite(0, 0, 'help', 0);
help.inputEnabled = true;
help.input.useHandCursor = true;
}
});
function resizeGame() {
this.scale.refresh();
}
window.onresize = resizeGame.bind(game);
</script>
</head>
<body>
<div id="game"></div>
<audio id="audio" controls style="display:none">
Your browser does not support the audio element.
</audio>
</body>
</html>
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.
How can I embed different YouTube videos at different places on the page using YouTube API? (This means they can not share the same <div> "player".) They also start at different times based on different onclick events. My code works fine when only one video is on the page, but for the life of me I cannot figure out the code to let this all work with 2 or more!
At first I was trying to simply add multiple instances of the code where I wanted each one to be, but that wasn't working. I read that all the players need to be added to one <script>, so I tried this:
(Also, does it matter WHERE on the page the <script> is and where the <div>s are? Can the <script> write to a <div> no matter where they are on the page?)
Anyway, here's the code I'm using:
// inside other containers with with relative and absolute positioning
// that fadeIn and fadeOut using jQuery
<div id="video1"></div>
// inside other containers with with relative and absolute positioning
// that fadeIn and fadeOut using jQuery
<div id="video2"></div>
<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player1;
var player2;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('video1',{
width: '320',
height: '216',
videoId: 'VIDEO_ID_1',
playerVars: {rel: 0, controls: 0, autohide: 1, disablekb: 1, enablejsapi: 1, modestbranding: 1, showinfo: 0 },
events: { 'onStateChange': onPlayerStateChange1 } });;
player2 = new YT.Player('video2',{
width: '320',
height: '216',
videoId: 'VIDEO_ID_2',
playerVars: {rel: 0, controls: 0, autohide: 1, disablekb: 1, enablejsapi: 1, modestbranding: 1, showinfo: 0 },
events: { 'onStateChange': onPlayerStateChange2 } });; }
function startVideo1() {
player1.playVideo();
$('#video_box_B1').delay(1000).fadeIn();
$("#video_box_B1").delay(20000).hide();
};
function onPlayerStateChange1(event) {
if(event.data === 2) {
$("#video_box_B1").hide();
}
}
function startVideo2() {
player2.playVideo();
$('#video_box_E5').delay(1000).fadeIn();
$("#video_box_E5").delay(20000).hide();
};
function onPlayerStateChange2(event) {
if(event.data === 2) {
$("#video_box_E5").hide();
}
}
</script>
// onclick triggers at various places on the page
<img src="image_1.jpg" onclick="startVideo1()" />
<img src="image_2.jpg" onclick="startVideo2()" />
Is there anyone who can tell what I'm doing wrong? BTW, those containers fading in and out works perfectly if I'm using a still image, text-only, or with only one video on the page, so it's not those fading containers causing this. It's got to be the YouTube script. Can anyone help?
Seems to be working in this jsbin:
http://jsbin.com/catuhimo/3/edit
What browser are you trying it out in? If you're using Safari bleeding edge Version 8.0 (10538.39.41) on Yosemite, jsfiddle and jsBin had some trouble rendering things. I tried out your code on Chrome latest and replaced the placeholders with actual video IDs and it worked.
Does that help? Am I missing the point of the your question? Based on what you asked, it seems to work ok for me.
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