用chrome观看体验镜像电影

<select>

         <option>left</option>

         <option selected>right</option>

         <option>above</option>

         <option>below</option>

</select>

<video autoplay="true" loop="true" width="480" height="270">

         <source src="http://www.tofei.cc/comments/4_BlowVido/video/BigBuckBunny_640x360.mp4">

         <source src="http://www.tofei.cc/comments/4_BlowVido/video/BigBuckBunny_640x360.ogv">

</video>

<style>

video{

         -webkit-box-reflect:right;

}

.left{

         margin:0 0 0 480px;

}

.above{

         margin:270px 0 0 0;

}

select{

         width:120px;

         height:30px;

         background:#FF6100;

         color:white;

         margin:15px;

         border: 1px solid #999999;

         display:block;

}

</style>

<script>

var video = document.querySelector('video');

var select = document.querySelector('select');

select.addEventListener('change', function() {

         video.style.webkitBoxReflect = this.value;

         video.className = this.value;

});

</script>

 

【内容展示有限，可以加群下载，群文件会定期更新学习资料，以及练手小案例】
【web前端交流学习群21】群号598399936【定期更新群文件】