PbootCMS添加视频黑屏以及视频太小的解决方案

最近在使用PbootCMS做一个网站，开发过程中遇到一个问题：文章内上传的视频在展示时是黑屏状态，点击后可以播放，但是播放器比较小。因此需要解决一下这个问题。

脑力分析解决方案

一般情况下是用网页video标签的播放器都可以通过poster来设置一个封面，所以可以通过添加poster来防止视频黑屏；另外还有一种方式就是让播放器默认播放，这样就直接显示视频内容了，不需要再添加poster属性了。所以大概方案就是让播放器自动播放。

另外还有一个视频大小的问题，这个问题的话我用css应该可以搞定，设置video标签即可。

解决问题

通过点击编辑器的查看html代码：

然后可以看到video标签里面有个preload="none"和width以及height,因此可以通过修改编辑器的js来解决。路径为：core/extend/ueditor

编辑 ueditor.all.js和ueditor.all.min.js,可以直接搜索preload="none"，然后把它删掉，顺带把width和height也给删掉。

ueditor.all.js:

        var ext = url.substr(url.lastIndexOf(".") + 1);
        if (ext == "ogv") ext = "ogg";
        str =
          "<video" +
          (id ? ' id="' + id + '"' : "") +
          ' class="' +
          classname +
          '" ' +
          (align ? ' style="float:' + align + '"' : "") +
          ' controls ' +
          '" src="' +
          url +
          '" data-setup="{}">' +
          '<source src="' +
          url +
          '" type="video/' +
          ext +
          '" /></video>';

可以将图片内case "video:"内的内容直接替换。

ueditor.all.min.js删除后的效果:

最后我们需要在css中添加代码:

video{
    width: 100%;
    height: auto;
}

这样就可以了！