关于HTML5中video标签在webstorm中使用绝对路径不能播放视频的解析
来源:互联网 发布:linux vi 退不出来 编辑:程序博客网 时间:2024/05/29 05:16
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标签播放多媒体文件最好把多媒体文件放到代码的根目录,使用相对路径,就不会出错了。
- 关于HTML5中video标签在webstorm中使用绝对路径不能播放视频的解析
- 为什么有些mp4不能在html5中video标签播放
- 使用HTML5的video标签播放视频
- 关于HTML5中Video标签无法播放mp4的解决办法
- html5-video视频标签播放视频实现过程中遇到的一系列问题。
- 直接在低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频的办法
- 直接在低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频的办法
- 低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频
- 【Unity3d】在Unity3d中播放视频:AVPro Video的使用
- 【Unity3d】在Unity3d中播放视频:AVPro Video的使用
- android中HTML5的Video标签的播放
- html5中关于音频--视频的播放
- HTML5 - 使用<video>播放视频
- HTML5 - 使用<video>播放视频
- html5的video标签插入mp4视频放在iis服务器访问无法播放解决方案
- html5 video标签不能播放mp4的问题
- html5 video标签不能播放mp4的问题
- html5中video标签
- OSI参考模型
- 从懵逼到恍然大悟之Java中RMI的使用
- 最近计划
- JavaScript 面向对象思想以及原型、继承
- 欢迎使用CSDN-markdown编辑器
- 关于HTML5中video标签在webstorm中使用绝对路径不能播放视频的解析
- gcc, g++区别
- ruby 正则表达式
- Executor框架
- 流程python学习笔记:第一章
- 第十三周:[leetCode] 128. Longest Consecutive Sequence
- nginx错误日志/访问日志
- 2017-5-18.19.20 C++primer笔记
- runtime之动态添加方法(动态决议,请求转发)