8
Replies
I agree- this is a missing function- we too use these shareable both as streaming 'previews' and download links. Not all of our stakeholders need to download the video, they are just approving a certain iteration of a video- We can't expect all of our stakeholders to download a 500MB file just top play in another media player. Being able to preview simply through the link is very helpful. Being that the 2nd most used browser in the market today is Safari, Id think that Adobe would consider catering to that market, IMO. 
ZGietek_ING wrote
Being that the 2nd most used browser in the market today is Safari, Id think that Adobe would consider catering to that market, IMO.
It depends on who you ask. Browser Statistics lists Safari #4 behind Chrome, Firefox and MS Edge.
I still say if you want Safari to play video, wrap your link inside HTML player code. Upload HTML page to your server and send that link to your colleagues.
Here's the code.
<!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>
AdChoices