关于HTML5中video标签在webstorm中使用绝对路径不能播放视频的解析

             HTML5的新特性中出现了一个非常6的<video>标签，这个标签的功能就是让多媒体文件可以很方便的在网页中播放。

         HTML样例：

    <videosrc="功夫瑜伽.mp4"controls width="300"height="300">您的浏览器不支持播放该视频！</video>   在html中只需要一个video标签和很少的代码就可以在网页上播放指定的视频文件。

         但是在实际操作中却碰到了在webstorm中打开浏览器却不能播放视频的问题。

代码先使用了绝对路径：

使用绝对路径的URL，在谷歌中的效果是：

在火狐的效果是：

但是我通过找到这个文件所在的位置直接点击进入浏览器却可以正常播放：。效果图：

然后我就想在webstorm中换成相对路径试一下，我把这个视频文件放在我的代码的根目录里面用相对路径从webstorm中就可以正常播放。如果放在根目录我依然使用绝对路径的URL却出现和上图一样无法播放视频的情况。这让初学前端的我百思不得其解，最后询问老师以后才彻底把问题搞清楚。

解析：

1.找到文件直接打开能播放。

打开浏览器的路径是file:///D:/webstorm/%E7%BB%83%E4%B9%A0/day_01/%E8%A7%86%E9%A2%91.html，这样是因为html根据的是file协议，不需要上传服务器，只需要一层一层寻找本地文件就可以播放。

2.在webstorm中通过绝对路径无法播放文件。

打开浏览器的路径是http://localhost:63342/webstorm/%E7%BB%83%E4%B9%A0/day_01/%E8%A7%86%E9%A2%91.html?_ijt=89ip3d0ub9ma00b6sfih75n6ur，这是html根据的是http协议，先把webstorm文件夹下的文件上传到服务器，然后在服务器里寻找视频文件，但是此时视频文件在d盘里，所以在服务器里无法找到所以显示无法播放。

3.把文件放在根目录使用绝对路径在webstorm中依然无法播放文件。

把视频放在根目录依然使用绝对路径还是无法播放也是因为webstorm上传文件到服务器，但是webstorm上层的路径不能访问，虽然文件已上传服务器，但是在服务器里根据路径无法找到本机电脑的d盘，所以造成无法播放。

所以我们以后用webstorm使用video标签播放多媒体文件最好把多媒体文件放到代码的根目录，使用相对路径，就不会出错了。