Control CloudFlare Stream video through JavaScript

Dear Tumult support,

I have two questions regarding autoplaying a streaming video hosted on CloudFlare Stream and how to interact with this streaming video object through JavaScript like responding to events to jump to another Scene within Hype and playing and pausing the video. I hope you can steer me in the right direction with the way to approach this.

The first scene has a button to have the viewer interact with the Hype object. The 2nd Scene has a CloudFlare video embedded on its main timeline in an HTML Widget. This is the code I am working on:

<stream src="ABCDEF12345" autoplay></stream>
<script data-cfasync="false" defer type="text/javascript" src="https://embed.videodelivery.net/embed/r4xu.fla9.latest.js?video=12345678abcde"></script>

<script type="text" language="javascript">
	var videoObject = document.getElementsByTagName('stream')[0];
	videoObject.addEventListener('ended', onEnded);
	window.cloudVideo = videoObject;
	cloudVideo.contentWindow.playVideo();

	function playVideo(){
		videoObject.play(); // CloudFlare Stream is not autoplaying 
	}

function.onEnded(){
		//alert('onEnded function called!');
		hypeDocument.showSceneNamed('mySceneName');
}

</script>

The CloudFlare embed works and the video shows correctly but there are two problems. The video won’t autoplay even though the user has interacted with the Hype Object. A Vimeo iframe embedded like this does work and autoplays. Maybe this has something to do with the way CloudFlare nests its videoObect? We prefer to use CloudFlare due to its speed.

I have tried to address the videoObject from a JS function in Hype (on the first frame or on Scene load) via the window variable named cloudVideo. For example I can change styles of the objects’ width and the video will be wider but I can’t call the playVideo() function to start playing the video.

The second problem is that addressing the hypeDocument inside the onEnded function doesn’t work as hypeDocument is not known. How can I jump to another Scene when the video has stopped playing. The onEnded function is being called as I tested this using the alert. So it works that far. Now I would like to control the timeline and scenes.

Can you help?

Thanks in advance for any guidance.

Kind regards,
Rob

1 Like

you may attach a sample hypefile …

Hi Hans-Gerd,

Thanks for your reply. Unfortunately I can’t share the Hype file due to client sensitive information in the training videos that I use in the Hype document. I’ll see if I can change the video’s.

if your code resides in the head or as innerHTML then try this

to get the hypeDocument.

btw if your embed creates an iFrame itself then please do not place your embed-code within a widget, but paste it in a regular elementshape ...

1 Like

Thanks for your help Hans-Gerd I will examine the example.

The example from @MaxZieb has given me full control of my Vimeo Object

Forgot to say. Vimeo API works great but I can’t get CloudFlare to work though. I’ll contact CloudFlare as well to ask for some more info.