video视频标签 响应式写法 pc 手机调用不同视频 亲测

切图网前端项目中遇到的， 前面分享过 picture图片标签的响应式用法，这次是video视频标签 响应式写法 pc 手机调用不同视频 亲测，附代码：

<video poster="images/inmoair3-video01-img.jpg" autoplay="autoplay" loop="loop" muted="" controls="controls" width="300" height="150"> 
<source media="(max-width: 768px)" srcset="https://cdn.shopify.com/videos/c/o/v/c358f7c44e56427ab6301b047f8ce4fd.mp4" type="video/mp4" /> 
<source src="https://cdn.shopify.com/videos/c/o/v/6b96e92737704642ae1fc658b3c8ad23.mp4" type="video/mp4" /> 
</video>

html5其实提供了很多响应式的用法，我们熟知的就是 css3 media query 这个是用来做响应式的，但是图片和视频如何响应式，html5其实也是提供了响应的方法。

原文地址 https://www.qietu.com/cn/video-xys/