Forum Discussion

DamienDickerson's avatar
DamienDickerson
Community Member
12 years ago

full screen video button?

I can't see full screen video button on playbar after when I importy a movie? Is any way to resize video on full screen after interactiion? (and came back to small size) ?
storyline 360
PaulWijnen-5c1c's avatar
PaulWijnen-5c1c
Community Member
10 years ago

UPDATE

Store the video files outside the webobject folder.
Copy the video files after publishing into this folder:
\story_content\external_files\

YOU CAN USE A VARIABLE IN STORYLINE TO PROCEED TO THE NEXT SLIDE WHEN THE VIDEO HAS ENDED. I USED "autoEndSlide" FOR THAT.
YOU CAN USE THIS METHOD FOR ANYTHING YOU WANT OF COURSE.

I DICOVERED THAT THE AUTOPLAY FUNCTION OF THE VIDEO TAG WILL CAUSE DOUBLE AUDIO IN IE. SO DONT USE IT AT ALL.

I ALSO READ THAT THE MP4 VIDEO CODING SHOULD BE SET TO "BASELINE PROFILE" AND AAC AUDIO.

 

NEW CODE

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Video</title> 

 

<style> 

body {

background-color: #FFFFFF;

font-family: "Calibri";

padding: 0px;

margin: 0px;

text-align: center;

width: 100%;

height: 100%;

overflow: hidden;

} 

video {

max-width: 100%;

height: auto;

padding: 0px;

margin: 0px;

overflow: hidden;

} 

</style>

 

<script type="text/javascript">

//adding these attrributes allows the browser to use full-screen

var frameEl = window.frameElement;

if (frameEl) {

window.frameElement.setAttribute("allowFullScreen", "allowFullScreen");

window.frameElement.setAttribute("webkitAllowFullScreen", "webkitAllowFullScreen");

window.frameElement.setAttribute("mozAllowFullScreen", "mozAllowFullScreen");

}

</script>

 

</head> 

<body oncontextmenu="return false">

 

<video controls="controls">

<source src="../../external_files/video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">

Your browser does not support the video tag.<br>

Please try to change your browser's compatibility mode.<br>

Alternatively, you can try using another browser.

</video>

 

<script>

var player = parent.GetPlayer();

player.SetVar("autoEndSlide","false");

     

var video = document.getElementsByTagName('video')[0]; 

video.onended = function(proceed) {

//alert('Video Ended');

var player = parent.GetPlayer();

player.SetVar("autoEndSlide","true");

};

 

//this is a workaround for the autoplay function

setTimeout(function(delay){

video.play();

}, 1000);

</script>

 

</body>

</html>