jquery 使用html video

在项目中碰到这么一个问题：用户在自定义portal页面的时候，可以上传自己的广告位视频。在上传的时候会出现视频是通过后台接口上传到服务器指定的目录下，但是页面上的视频并没有加载成功，而是显示之前的，这并没有达到预期的效果。

我们先来看一看html的Video组件的使用方法和对应的API。我们从菜鸟网站或者W3C上都能轻而易举的找到对应的API及其使用方法。

关于属性中我们所关注的就是autoplay，是否设置为自动播放，一时就是浏览器加载你所呈现完整页面所需要的

资源文件之后自动播放。

video提供了三种常用的方法，load重新加载，play播放，pause暂停播放。

其中load方法提供了视频的重新加载。我们知道浏览器加载资源文件之后会存放到缓存中，你所针对的上传区域

的文件资源就确定了。上传之后你会有意识的替换文件对应的路径，比如经过一系列的赋值操作，那么我们的src指向

的资源路径就会发生变化，有人就会发现问题，资源文件被替换了，但并没有替换成我上传的文件资源，这时怎么

回事？

在刷新之后因为浏览器将所需的资源文件引入到缓存中，除非我们有意识的去刷新去更新缓存中的资源，那么

他才会更新到我们的页面中。这也就是为什么要引入load的方法。详见代码，使用的是angularjs对应的flowjs来实现

上传操作，在成功的回调函数中去重新load一下资源文件，使其覆盖缓存中的数据。

vm.cache.welVideoUrl = url;
$('#welcome_video_id video').load();

我这里使用的是框架封装的cache，直接将数据源存到cache中，当我更新视频或者图片资源的时候，其引用页面

对应的资源路径也会相应的发生变化。

如果使用其他方式的话，使用jquery的$("#id vedio").prop("src",src).然后 $("#id vedio").load()。也是可以的。

在网上看到其他人还碰到其他的问题。

使用prop会使得浏览器去重新编排这些引入的资源文件，会起到刷新的功能。

详见：https://segmentfault.com/q/1010000009128947?_ea=1831301

点击按钮修改视频资源，并重新加载。
点我

Video courtesy of Big Buck Bunny.

也可以直接使用官方提供的纯js的写法。