Linking to scene interfering with embedded YouTube video autoplay

Hi there.

I have two javascript functions which are set on layout load. One is a function relates to my embedded YouTube video and the other is to allow for the use of the navigational browser buttons to go back and forward between previously visited scenes.

It seems the function related to the embedded youtube video which has been set to autoplay will not autoplay when the javascript function with the code added below is also set to load.

function Sceneurl (hypeDocument, element, event) {

var checkHash = function() { 
    var hash = window.location.hash.substring(1); 
    for(var i = 0; i < hypeDocument.sceneNames().length; i++) {
    if(hypeDocument.sceneNames()[i] == hash) {
    hypeDocument.showSceneNamed(hash);
    break;
    }
    }
    }; 

    if (window.loadedHashLocation != true) { 
    window.loadedHashLocation = true; 
    checkHash(); 
    window.onhashchange = checkHash; 
    }

    window.location.hash = "#" + hypeDocument.currentSceneName();

I have played around for a little while and they are definitely connected as removing the sceneurl function means the video autoplays.

Any help would be great.

Thanks

Do you mind attaching a zip of your entire .hype document? I think it will be easier to understand the interaction with the youtube and reproduce the problem that way.

It could be that changing the hash/URL has an affect on the autoplay status, but I haven’t heard about this being an issue.

Thanks for your reply Jonathan. Please find below a zipped .hype document attached. I have the sceneurl javascript currently loading with the scene and therefore isn’t allowing autoplay. If you remove that function completely the auto play then works. As you have mentioned in your reply it sounds like it could be to do with the the hash/URL having an effect.

Thanks again for your help hopefully this can be resolved. :wink:For Jonathan.zip (249.9 KB)

I wasn’t able to get autoplay to work by removing the function or code. Can you elaborate on your setup (browser, OS, versions, any prefs you have that might have autoplay on?) I don’t think it would ever work because autoplay isn’t allowed by default.

You might also want to try swapping the order of the On Scene Load javascripts so that Sceneurl() comes before YouTube().

If I set the Sceneurl() function to ‘none’ the autoplay doesn’t work, but completely removing the ‘Action’ like in the attached screenshot and just have the scene load the YouTube() function autoplay then works for me.

Within the YouTube() code Autoplay has been set to 1 within the playerVars and does seem to work for me when I do what is mentioned above. I have tested using the lastest version of Safari and Chrome and Firefox.

Thanks

Screenshot 2020-03-09 at 21.14.31

Thanks, I can reproduce now. There’s two basic problems at play:

The first is the ordering. By having the Sceneurl() function after the youtube, it is triggering a secondary scene change . This means the YouTube() code will get executed twice, which doesn’t seem to work correctly. If you simply swap the ordering of the two functions it will work fine for me.

The second is the None JavaScript vs. Remove. This is a bug in Hype where the None will actually call the previous function in the list instead of not calling anything. Thus this still gets a double call of the YouTube() function which fails to work. It looks like this was introduced in v3.6, and has been fixed for the next release.

I hope that helps!

2 Likes

Hi Jonathan.

I’m glad that it is possible and you have managed to get it working. I am still struggling here to get it to work after swapping around the order of the functions.

I have tried a few alternatives including removing both functions and then adding them back in the correct order, (Scenerul function above the YouTube function) but unfortunately with no luck still.

If possible it would be great if you could upload your successful hype project so I can compare.

Thank you for your help on this.

Sorry, I think that might have been my mistake in testing.

I think the best fix is to not call showSceneNamed() if you are already on the scene. The code for Sceneurl() would be:

	var checkHash = function() { 
		var hash = window.location.hash.substring(1); 
		for(var i = 0; i < hypeDocument.sceneNames().length; i++) {
			if(hypeDocument.sceneNames()[i] == hash) {
				if(hypeDocument.currentSceneName() != hash) {
					hypeDocument.showSceneNamed(hash);
				}
				break;
			}
		}
	}; 

	if (window.loadedHashLocation != true) { 
		window.loadedHashLocation = true; 
		checkHash(); 
		window.onhashchange = checkHash; 
	}

	window.location.hash = "#" + hypeDocument.currentSceneName();

Try:
For Jonathan-fixed.hype.zip (244.4 KB)

Thanks again for your help here Jonathan.

I may have missed something but the code you have added looks to be the same as the current Sceneurl()

Thanks for attaching the project. I am using an older version of Hype so I am unable to open it. Are you able to save the project to be compatible with Hype 3? If you have the two functions working together within the example project I can take a look and translate it to my main project.

Thanks

The difference is that showSceneNamed(hash); is enclosed within an if statement:

				if(hypeDocument.currentSceneName() != hash) {
					hypeDocument.showSceneNamed(hash);
				}

This means it won’t make the call if it is already there, avoiding a double-load.

Sorry, I had not seen that it was a v3 doc; here’s that version:

For Jonathan-fixed-v3.hype.zip (244.0 KB)

Thanks Jonathan for uploading the example file. I have revised my project to include this change and it is working. :wink:

I did noticed when testing if the video isn’t played first time round and the scene is left and then revisited the autoplay does not seem to work. I imagine like you have mentioned previously that this is a problem between the two functions? It’s a small issue which can be ignored, but I did just think to point this out as you may have a fix / suggestion?

Again I really appreciate your help!

Thanks

I think the problem comes about from running the code again?

Probably if you add this to the top of the YouTube() function before anything else is run it will solve it:

if(window.hasSetupBefore == true) {
	return;
}
window.hasSetupBefore = true;

But I’m not an expert on the API or autoplay mechanisms it employs…

1 Like

Just added this code in and did a few tests. Seems to be working perfect! :slight_smile:

Thanks Jonathan, really appreciated your help with this problem.

Great, glad that worked!

1 Like