<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div2{ width: 600px; height: 300px; background: skyblue; } </style> </head> <body> <video width="800" height="" src="img/shiping.mp4" poster="img/timg.jpg" controls="controls"></video> <button>播放</button> <button class="fullscreen">全屏</button> <img src="img/timg.jpg"/> <div class="div2"> <h1>helloworld</h1> </div> <script type="text/javascript"> var v1 = document.querySelector('video') document.querySelector('button').onclick = function(){ v1.play() } document.querySelector('.fullscreen').onclick = function(){ v1.webkitRequestFullScreen() } document.querySelector('img').onclick = function(){ document.querySelector('img').webkitRequestFullScreen() } document.querySelector('.div2').onclick = function(){ document.querySelector('.div2').webkitRequestFullScreen() } </script> </body> </html>