html5 video · 前端開發

``` <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /*body {font-family: Arial, Helvetica, sans-serif;}*/ #video_img { border-radius: 5px; cursor: pointer; transition: 0.3s; } #video_img:hover {opacity: 0.7;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .video_myModal_content { margin: auto; display: block; width: 80%; max-width: 700px; } /* video_caption of Modal Image */ #video_caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation */ .video_myModal_content, #video_caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The video_close Button */ .video_close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .video_close:hover, .video_close:focus { color: #bbb; text-decoration: none; cursor: pointer; } video.video_setting { margin: auto; display: block; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .video_myModal_content { width: 100%; } } </style> </head> <body> <img id="video_img" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">  <div id="video_myModal" class="modal"> <span class="video_close">×</span>  <video width="800" height="" class="video_setting" poster="img_snow.jpg" controls autoplay> <source src="/htdocs-edit/1.mp4" type="video/mp4"> </video> <div id="video_caption"></div> </div> <script> // Get the modal var modal = document.getElementById("video_myModal"); // Get the image and insert it inside the modal - use its "alt" text as a video_caption var img = document.getElementById("video_img"); var modalImg = document.getElementById("img01"); var video_captionText = document.getElementById("video_caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; video_captionText.innerHTML = this.alt; } // Get the <span> element that video_closes the modal var span = document.getElementsByClassName("video_close")[0]; // When the user clicks on <span> (x), video_close the modal span.onclick = function() { modal.style.display = "none"; } </script> </body> </html> ```