Skip to main content
A
andLIGHT_ginza
Participant
June 1, 2021
Question

ios サファリでvideoのコントローラーを非表示にしたい

  • June 1, 2021
  • 1 reply
  • 1337 views

はじめまして。
現在、DreamweaverでVIDEOタグを使い、Mp4ファイルをサファリで表示させているのですが、プロパティ内のContorolチェックボックスを外すと確かにブラウザ上ではビデオコントローラーは消えるのですが、動画自体の再生も始まりません。

コントローラ非表示で再生を可能にすることは出来ますでしょうか？

    This topic has been closed for replies.

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    June 1, 2021

    The question is "can video play without controls?"  The answer is it depends on the device and what browser settings people use.  If autoplay is disabled by the user and there are no player controls, your users won't be able to view your video. Also many devices will ignore autoplay when the video volume is not muted.

     

    This code works for most people no matter which devices they have.

     

    <!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">
<!--Bootstrap 4.5 on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<style>
body {
margin: 0;
background: #222;
}
/**style play button over the video**/
.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>
<header>
<div class="video-wrapper">
<!--CHANGE POSTER IMAGE AND VIDEO TO YOUR OWN-->
<video poster="https://source.unsplash.com/XT5OInaElMw/1600x900" muted="muted" loop="loop" >
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>
</div>
</header>
<nav id="topNav" class="navbar navbar-top navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand mx-auto" href="index.html">
<!--Your logo goes here-->
<img class="shadow-sm rounded-circle" src="https://dummyimage.com/250x110" alt="logo/brand">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item current">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">sub-1a</a>
<a class="dropdown-item" href="#">sub-1b</a>
<a class="dropdown-item" href="#">sub-1c</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid text-center">
<h1 class="display-5">Bootstrap 4.5 with Dreamweaver</h1>
<p class="lead">Easily build your page using the Bootstrap components from the Insert panel.</p>
<hr class="my-4">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-dark btn-lg" href="https://getbootstrap.com/docs/4.0/components/jumbotron/" role="button">Learn more</a>
</p>
</div>
<div class="container-fluid">
<div class="row text-center text-light">
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>
</div>
<hr class="my-4">
<div class="row">
<footer class="col">
<small>© 2021 Footer goes here</small>
</footer>
</div>
</div>
<script>
//Invoke the play button on load
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>
<!--Supporting scripts: first jQuery, then popper, then Bootstrap JS, etc...-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

     

    I hope that helps.

     

    Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices