Autoplay / eemove control bar

Permalink Browser Info Environment
Hi!

Working on my portfolio site and am pleased with how the video looks. Just a few questions...
My video is more like an "Ad" - I wanted something graphic with movement, that would simply end and remain in view.

http://stagingseydoux5.ch/

The block has fulfilled this to some extent, but I would like to "tweak" it so it looks better:
1. Is it possible to have the video play on load?
2. Can I get rid of the control bar? I'm thinking this may be just CSS, from the short look I had at the block innards.

Thanks for any direction or assistance.

Type: Discussion
Status: Resolved
arlenesey
View Replies:
Steevb replied on at Permalink Reply
Steevb
Hello,
Thanks for purchasing.

Open view.php and replace all code with code below:
<?php   defined('C5_EXECUTE') or die("Access Denied.");
$f = $controller->getFileObject();
$relPath = $f->getRelativePath();
$src = $controller->getPosterObject();
$rel_poster_path = $src->getRelativePath();?>   
<?php  $c = Page::getCurrentPage(); ?>
<div class="mouter">
<div class="mp" <?php if ($width>1){?>width="<?php echo $width;?>"<?php } if($height>1){?> height="<?php echo $height;?>"<?php }?>>
<video style="max-width:100%;height:auto" <?php if ($width>1){?>width="<?php echo $width;?>"<?php } if($height>1){?> height="<?php echo $height;?>"<?php }?> autoplay=true  poster="<?php echo $rel_poster_path; ?>">
<source src="<?php  echo $relPath;?>" type="video/mp4">
 <?php  echo t('Your Browser does not support the HTML5 Video Tag.');?>
</video>
</div>
</div>
arlenesey replied on at Permalink Reply
arlenesey
Hi SteevB
I made it a template instead of replacing view.php...
It seems to work great.

Thank you!
Steevb replied on at Permalink Reply
Steevb
Way to go, saves any issues with updates.

Steev
arlenesey replied on at Permalink Reply
arlenesey
Sorry SteevB -just checked the following...

It works fine on latest desktop
Chrome
Firefox
Safari
but I just get the poster image (jpg) - on iPad and iPhone - it doesn't autoplay.
When I remove the template, the play-bar appears and the "play button", and the video plays.
When I re-invoke the template it is blank again with only the poster image.
Is this fixable?

Thanks for any help...
Steevb replied on at Permalink Reply
Steevb
Sorry, IOS will not 'autoplay', never has to my knowledge. To see a play button you need to have 'controls' in the tag.
arlenesey replied on at Permalink Reply
arlenesey
Okay Steev - here is the answer.
Apple does not permit autoplay, so that clients aren't forced to download big videos while roaming. I get that.

Would there be any way to do conditional programming - targeted for mobile? So the play bar and arrow appear on mobile/tablet, but autoplay is invoked on larger formats?
If not I will explore other solutions.

I realise this is outside the scope of "support", so if it doesn't cost too much I'd be willing to reimburse you for your time.
Let me know per PM
Steevb replied on at Permalink Reply
Steevb
Sorry bit late, been out with dog.

Media queries should work easily, will look and get back asap.

Regards
Steev
arlenesey replied on at Permalink Reply
arlenesey
Yes - I was thinking along the same lines - found this article and I think the implementation is correct. That is, on all devices with port larger than 767, the video does autoplay, below it the poster appears and there is no video available. I was unsure how to do this in relation to your block, however. As view.css in the template?

Code example at:
http://slicejack.com/creating-a-fullscreen-html5-video-background-w...
@media (max-width: 767px) {
  .fullscreen-bg {
    background: url('../img/videoframe.jpg') center center / cover no-repeat;
  }
  .fullscreen-bg__video {
    display: none;
  }
.
Steevb replied on at Permalink Reply 1 Attachment
Steevb
Try attached template called 'autoplay'. Unzip into blocks/sb_mp4_player.

The only issue the 'desk' class will still play although it will not be seen. So if there is any sound or music it will be heard.

Hope it works for you.

Steev
Steevb replied on at Permalink Reply
Steevb
Okay now, working?
arlenesey replied on at Permalink Reply
arlenesey
Thanks Steev

Sorry - I was busy with another project yesterday.... however, I added the template and it seems to be okay. I didn't write because I haven't tested it everywhere, and my tendency is to respond before I have done that. I will try to get to it today and let you know.

Thank you for hanging in there - i won't forget to write a review.

Arlene
arlenesey replied on at Permalink Reply
arlenesey
Okay - here are my observations on the few machines available to me:
Chrome ✓
Safari ✓
Firefox ✓
IE ✓ but shows a dark grey box shortly on load (who uses IE?)
iPad ✓ shows poster only
iPhone ✓ shows Poster and "play" arrow in middle - but I don't think too many people will be looking at my site on the iPhone anyway - it's okay.

Thank you and hope this helped...

concrete5 Environment Information

concrete5

Dashboard
Sitemap
Files
Members
Reports
Pages & Themes
Conversations
Workflow
Stacks & Blocks
Extend concrete5
System & Settings
Basics
Multilingual
SEO & Statistics
Files
Optimization
Permissions & Access
Login & Registration
Email
Conversations
Attributes
Environment
Environment Information
Debug Settings
Logging Settings
Proxy Server
Database Entities
Backup & Restore
Logged in as admin.
Sign Out.
Environment Information

# concrete5 Version
Core Version - 5.7.5.6
Version Installed - 5.7.5.6
Database Version - 20151221000000

# concrete5 Packages
Agora Theme by tallacman (1.0.5), Automatic Email Obfuscator (2.0.1), Fluid Gallery (2.2), MP4 Player (1.4), Page Selector Attribute (2.0).

# concrete5 Overrides
blocks/content/templates/img_nested/view.php, blocks/content/templates/img_nested/view.css, blocks/content/templates/img_nested, blocks/content/templates/view.css, blocks/content/templates, blocks/content, blocks/page_list/templates/agora_thumb_grid/view.php, blocks/page_list/templates/agora_thumb_grid/view.css, blocks/page_list/templates/agora_thumb_grid, blocks/page_list/templates, blocks/page_list, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/nb_NO/LC_MESSAGES/messages.mo, languages/nb_NO/LC_MESSAGES, languages/nb_NO, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/pl_PL/LC_MESSAGES/messages.mo, languages/pl_PL/LC_MESSAGES, languages/pl_PL, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, themes/agora_arlene/page_theme.php, themes/agora_arlene/thumbnail.png, themes/agora_arlene/view.php, themes/agora_arlene/js/slicknav.js, themes/agora_arlene/js, themes/agora_arlene/default.php, themes/agora_arlene/description.txt, themes/agora_arlene/elements/header1.php, themes/agora_arlene/elements/header.php, themes/agora_arlene/elements/footer.php, themes/agora_arlene/elements, themes/agora_arlene/css/main.less, themes/agora_arlene/css/presets/moody_blue.less, themes/agora_arlene/css/presets/canada.less, themes/agora_arlene/css/presets/defaults.less, themes/agora_arlene/css/presets/arlene.less, themes/agora_arlene/css/presets, themes/agora_arlene/css/styles.xml, themes/agora_arlene/css/build/grid.less, themes/agora_arlene/css/build/core_blocks/image-slider.less, themes/agora_arlene/css/build/core_blocks/page-list-template-thumbnail-grid.less, themes/agora_arlene/css/build/core_blocks, themes/agora_arlene/css/build/forms.less, themes/agora_arlene/css/build/resets.less, themes/agora_arlene/css/build/agora.less, themes/agora_arlene/css/build/type.less, themes/agora_arlene/css/build/fonts/defaults.less, themes/agora_arlene/css/build/fonts/roboto.less, themes/agora_arlene/css/build/fonts, themes/agora_arlene/css/build/slicknav.less, themes/agora_arlene/css/build/breakpoints.less, themes/agora_arlene/css/build, themes/agora_arlene/css, themes/agora_arlene, blocks/content/templates/img_nested/view.php, blocks/content/templates/img_nested/view.css, blocks/content/templates/img_nested, blocks/content/templates/view.css, blocks/content/templates, blocks/content, blocks/page_list/templates/agora_thumb_grid/view.php, blocks/page_list/templates/agora_thumb_grid/view.css, blocks/page_list/templates/agora_thumb_grid, blocks/page_list/templates, blocks/page_list, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/nb_NO/LC_MESSAGES/messages.mo, languages/nb_NO/LC_MESSAGES, languages/nb_NO, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/pl_PL/LC_MESSAGES/messages.mo, languages/pl_PL/LC_MESSAGES, languages/pl_PL, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, themes/agora_arlene/page_theme.php, themes/agora_arlene/thumbnail.png, themes/agora_arlene/view.php, themes/agora_arlene/js/slicknav.js, themes/agora_arlene/js, themes/agora_arlene/default.php, themes/agora_arlene/description.txt, themes/agora_arlene/elements/header1.php, themes/agora_arlene/elements/header.php, themes/agora_arlene/elements/footer.php, themes/agora_arlene/elements, themes/agora_arlene/css/main.less, themes/agora_arlene/css/presets/moody_blue.less, themes/agora_arlene/css/presets/canada.less, themes/agora_arlene/css/presets/defaults.less, themes/agora_arlene/css/presets/arlene.less, themes/agora_arlene/css/presets, themes/agora_arlene/css/styles.xml, themes/agora_arlene/css/build/grid.less, themes/agora_arlene/css/build/core_blocks/image-slider.less, themes/agora_arlene/css/build/core_blocks/page-list-template-thumbnail-grid.less, themes/agora_arlene/css/build/core_blocks, themes/agora_arlene/css/build/forms.less, themes/agora_arlene/css/build/resets.less, themes/agora_arlene/css/build/agora.less, themes/agora_arlene/css/build/type.less, themes/agora_arlene/css/build/fonts/defaults.less, themes/agora_arlene/css/build/fonts/roboto.less, themes/agora_arlene/css/build/fonts, themes/agora_arlene/css/build/slicknav.less, themes/agora_arlene/css/build/breakpoints.less, themes/agora_arlene/css/build, themes/agora_arlene/css, themes/agora_arlene

# concrete5 Cache Settings
Block Cache - Off
Overrides Cache - Off
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Apache

# Server API
cgi-fcgi

# PHP Version
5.6.18

# PHP Extensions
bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dba, dom, ereg, exif, fileinfo, filter, ftp, gd, gettext, hash, iconv, imagick, imap, intl, ionCube Loader, json, libxml, mbstring, mcrypt, mhash, mysql, mysqli, mysqlnd, odbc, openssl, pcntl, pcre, PDO, pdo_mysql, PDO_ODBC, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, pspell, readline, Reflection, session, shmop, SimpleXML, soap, sockets, SPL, sqlite3, standard, sysvmsg, sysvsem, sysvshm, tokenizer, wddx, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend Guard Loader, Zend OPcache, zip, zlib.

# PHP Settings
max_execution_time - 60
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 20000
memory_limit - 256M
post_max_size - 512M
sql.safe_mode - Off
upload_max_filesize - 512M
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
odbc.max_links - Unlimited
odbc.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - Unlimited
pgsql.max_persistent - Unlimited
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 1440
soap.wsdl_cache_limit - 5
opcache.max_accelerated_files - 4000
opcache.max_file_size - 0
opcache.max_wasted_percentage - 5

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.