<!-- $ga -->
<!-- $favicon -->
</head>
-<body style="background-color:#<!-- $bgcolor -->;" data-branch="master">
+<body style="background-color:#<!-- $bgcolor -->;" data-branch="html5video">
<!--googleoff: all-->
<!-- $svg -->
<div id="message"><!-- $message --></div>
if (this.fluidbook.datas.linkBlinkTime > 0 && this.fluidbook.datas.mobileLinksRevealAnim) {
setTimeout(function () {
$this.animateLinks();
- }, 1000);
+ }, 200);
}
setTimeout(function () {
console.info('initVideos called from fluidbook.links');
var settings = fluidbook.video.players[id];
console.log(settings);
+ // In the case of autoplay videos, we don't want the autoplay to fire
+ // more than once (ie. never after we have these settings reccorded)
+ // It interferes with play/pausing
+ player.autoplay(false);
+
// Restore settings
player.volume(settings.volume);
player.muted(settings.muted);
player.currentTime(settings.currentTime);
- player.play(); // Start player to go to current position - necessary even if it will be paused immediately
- if (settings.paused) {
- player.pause();
- }
+
+ // Start player to go to current position - necessary even if it will be paused immediately
+ setTimeout(function() { player.play(); }, 100);
+
+ // ToDo: try setting a single (.one(...)) event handler for the "play" event
+
+ player.one('play', function() {
+ fb('Player has started playing... ID: ' + id);
+ // Handle pause in here if needed.. Better than using the timeout...
+
+ if (settings.paused) {
+ fb(id + ' should be paused');
+ setTimeout(function() { player.pause(); }, 200);
+ }
+
+ });
+
+
// var playPromise = player.play();
// if (settings.paused) {
player.on('pause', function() {
fb(id + ' player paused');
- // Todo: show/hide play button: http://stackoverflow.com/a/25296575
+ // Show play button (ref: http://stackoverflow.com/a/25296575)
+
+ this.bigPlayButton.show();
+
+ // Now the issue is that we need to hide it again if we start playing
+ // So every time we do this, we can create a one-time listener for play events.
+ player.one('play', function() {
+ this.bigPlayButton.hide();
+ });
});
// player.on('fullscreenchange', function() {
$('.video-js').each(function() {
var id = $(this).attr('id');
- // When the player is in fullscreen mode, we don't want to have the controls scaled
- if (videojs(id) && videojs(id).isFullscreen()) {
+ // When the player is in fullscreen mode or view popup, we don't want to have the controls scaled
+ if (videojs(id) && (videojs(id).isFullscreen() || $('body').hasClass('view'))) {
$(this).attr('style', ''); // Clear scaling for fullscreen player
} else {
$(this).css('fontSize', 12 / fluidbook.resize.bookScale);
/* The font size is what makes the big play button...big.
All width/height values use ems, which are a multiple of the font size.
If the .video-js font-size is 10px, then 3em equals 30px.*/
- font-size: 10em;
+ font-size: 3em;
/* We're using SCSS vars here because the values are used in multiple places.
Now that font size is set, the following em values will be a multiple of the
new font size. If the font-size is 3em (30px), then setting any of
line-height: 1.5em;
height: 1.5em;
width: 3em;
- background-color: transparent !important;
opacity: 0.6;
/* 0.06666em = 2px default */
border: none;
/* 0.3em = 9px default */
- border-radius: 0.3em;
+ border-radius: 0;
/* Align center */
left: 50%;
top: 50%;
margin-left: -1.5em;
margin-top: -0.75em;
+ background-color: transparent !important;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 528.65 595.81'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EAsset 1%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_2-2' data-name='Layer 2'%3E%3Cpath class='cls-1' d='M28.21,2.49l490.88,279a18.88,18.88,0,0,1,0,32.83l-490.88,279A18.88,18.88,0,0,1,0,576.9v-558A18.88,18.88,0,0,1,28.21,2.49Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+.vjs-fluidbook-skin .vjs-big-play-button .vjs-icon-placeholder {
+ display: none;
+}
+.vjs-paused.vjs-has-started .vjs-big-play-button {
+ display: block;
}
.vjs-fluidbook-skin .vjs-big-play-button:focus,
.vjs-fluidbook-skin .vjs-big-play-button:hover {
/* The font size is what makes the big play button...big.
All width/height values use ems, which are a multiple of the font size.
If the .video-js font-size is 10px, then 3em equals 30px.*/
- font-size: 10em;
+ font-size: 3em;
/* We're using SCSS vars here because the values are used in multiple places.
Now that font size is set, the following em values will be a multiple of the
new font size. If the font-size is 3em (30px), then setting any of
line-height: 1.5em;
height: 1.5em;
width: 3em;
- background-color: transparent !important;
opacity: 0.6;
/* 0.06666em = 2px default */
border: none;
/* 0.3em = 9px default */
- border-radius: 0.3em;
+ border-radius: 0;
/* Align center */
left: 50%;
top: 50%;
margin-left: -1.5em;
margin-top: -0.75em;
//display: block;
+
+ background-color: transparent !important;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 528.65 595.81'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EAsset 1%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_2-2' data-name='Layer 2'%3E%3Cpath class='cls-1' d='M28.21,2.49l490.88,279a18.88,18.88,0,0,1,0,32.83l-490.88,279A18.88,18.88,0,0,1,0,576.9v-558A18.88,18.88,0,0,1,28.21,2.49Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: contain;
+
+ .vjs-icon-placeholder {
+ display: none;
+ }
}
+
+// Allow play button to be redisplayed when video is paused
+.vjs-paused.vjs-has-started .vjs-big-play-button {
+ display: block;
+}
+
.vjs-fluidbook-skin .vjs-big-play-button:focus, .vjs-fluidbook-skin .vjs-big-play-button:hover {
opacity: 1;
outline: none;
projects / fluidbook-html5.git / commitdiff