Highlighted

Video player without buttons

New Here ,
Oct 07, 2019

Copy link to clipboard

Copied

I'm using Dreamweaver CC 2014. I'm looking for an extesion or code that would play a self playing video, movie in a container without any player's buttons. 

Thank you

TOPICS
Extensions

Views

193

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Video player without buttons

New Here ,
Oct 07, 2019

Copy link to clipboard

Copied

I'm using Dreamweaver CC 2014. I'm looking for an extesion or code that would play a self playing video, movie in a container without any player's buttons. 

Thank you

TOPICS
Extensions

Views

194

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 07, 2019 0
Adobe Community Professional ,
Oct 07, 2019

Copy link to clipboard

Copied

You need controls for device/browsers that do NOT support autoplay - for a lot of devices the sound is muted too. There a re a lot of other considerations but this is a basic example.

 

<video style="min-width:100%; min-height:100%;" playsinline autoplay loop muted controls>

     <source type="video/mp4" src="/video/test.mp4>

     <source type="video/webm" src="video/test.webm">

</video>


Paul-M, ACP - www.webspectrum.co.uk

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2019 1
Adobe Community Professional ,
Oct 07, 2019

Copy link to clipboard

Copied

The rule of thumb with media is ALWAYS allow users to decide.  For this reason "Autoplay" of audible  media is not supported by all browsers.   Also, when you take away player controls, many people including myself will never know  your site contains media.  We see only a static image with no way to play it.

 

MDN Autoplay Guide

https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

 

This way, the play button is obvious to everyone.

clipboard_image_0.png

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Video Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
.video-wrapper { position: relative; }
.video-wrapper > video {
width: 100%;
vertical-align: middle;
}
 .video-wrapper > video.has-media-controls-hidden::-webkit-media-controls {
 display: none;
}
.video-overlay-play-button {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 10px calc(50% - 50px);
position: absolute;
top: 0;
left: 0;
display: block;
opacity: 0.95;
cursor: pointer;
background-image: linear-gradient(transparent, #000);
transition: opacity 150ms;
}
.video-overlay-play-button:hover { opacity: 1; }
.video-overlay-play-button.is-hidden { display: none; }
</style>
</head>
<body>
<div class="video-wrapper"> 
<!--CHANGE MP4 AND POSTER IMAGE TO YOUR OWN-->
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/poster.png" controls>
<source src="https://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
</div>
<script>

var videoPlayButton,
videoWrapper = document.getElementsByClassName('video-wrapper')[0],
video = document.getElementsByTagName('video')[0],
videoMethods = {
renderVideoPlayButton: function() {
if (videoWrapper.contains(video)) {
this.formatVideoPlayButton()
video.classList.add('has-media-controls-hidden')
videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]
videoPlayButton.addEventListener('click', this.hideVideoPlayButton)
}
},
formatVideoPlayButton: function() {
videoWrapper.insertAdjacentHTML('beforeend', '\
<svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">\
<circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"/>\
<polygon points="70, 55 70, 145 145, 100" fill="#fff"/>\
</svg>\
')
},
hideVideoPlayButton: function() {
video.play()
videoPlayButton.classList.add('is-hidden')
video.classList.remove('has-media-controls-hidden')
video.setAttribute('controls', 'controls')
}
}
videoMethods.renderVideoPlayButton()
</script>
</body>
</html>

 

 

Nancy O'Shea, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2019 1