返回新闻列表

ueditor解决video标签设置封面问题-自动显示视频第一秒为封面

发布日期: 2023-06-12 | 来源: 智软设计工作室

ueditor解决video标签设置封面问题


自动显示视频第一秒为封面

电脑端比较好解决


修改ueditor.all.js

找到 case 'video' 约在17609行左右:版本不一样所在行不一样,

修改其下面的 preload="none" 修改为:preload="metadata"  和添加 webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" (取消点击ios浏览器全屏),自己多测试一下确保正常即可!


搜索对应修改,


但是你会发现手机端默认还是空白的。是因为默认加载为0秒,

我们需要在视频src后面加

参数 #t=1      #1表示视频第一秒 或者0.1秒,这个自己调一下。根据视频

<script>
    //jq 设置 video 标签src地址
   // var myurl = $("video").attr("src");
   // $("video").attr("src", myurl+ '#t=1');


   function isMobile(){
  return /(android|iphone|ipad|phone|mobile)/i.test(navigator.userAgent);
}

if (isMobile()) {
 


// 获取指定元素内所有 video 标签
var videos = $('.w-richtext').find('video');
   
// 遍历每个 video 标签
videos.each(function() {
  var origSrc = $(this).attr('src'); // 获取原始的视频地址
  var srcWithNum = origSrc+'#t=0.3';
 
  $(this).attr('src', srcWithNum); // 修改视频地址为新地址
});

// 获取指定元素内所有 video 标签
var sources = $('.w-richtext').find('source');
    
// 遍历每个 source 标签
sources.each(function() {
  var origSrc = $(this).attr('src'); // 获取原始的视频地址
  var srcWithNum = origSrc+'#t=0.3';
  
  $(this).attr('src', srcWithNum); // 修改视频地址为新地址
});


}
</script>


但是后面发现一个问题。就是苹果手机端Safari 浏览器,他会从1秒开始播放。如果卡住的话。他会出现时间在走。视频不动的现象,


后来就直接加入了video.js插件,目前看不会出现了 时间进度条走动,视频不动的现象,如果卡住他进度条也会卡或者 加载完会回到原点播放。

推荐技术资料

win10无法连接xp电脑共享打印机解决办法和链接方法

2022-04-07

今天公司换了新电脑,发票打印机。还在老电脑里面。没动,要共享出来,但是发现win10 怎么都没法链接xp的共享打印机,后来网上找了个解决方法。如下。第一,Win10添加SMB 1.0支持1、打开控制面板,点击程序和功能2、点击启用或关闭Windows功能选项4、勾选SMB 1.0/CIFS File Sharing Support 选项,确定5、安装完SMB 1.0支持

阅读更多

pbootcms幻灯片新增一个手机图片上传字段

2024-07-01

首先到数据库【ay_slide】表中新增一个轮播图字段,我加得是Mpic找到路径:/apps/admin/controller/content/下找到SlideContrller.php文件找到代码:// 轮播图增加,添加【picc】这个新增的数据字段名称,该文件共需要新增四处,可以对照其他字段进行添加如图,下面修改数据 得地方也改下。然后修改模板文件,/apps/ad

阅读更多

PbootCMS栏目页 详情页获取顶级栏目大图

2022-05-19

PbootCMS栏目页 详情页获取顶级栏目大图,这样不用每个子类都设置栏目大图banner{pboot:sort scode={sort:tcode}}<div class="nybanner"><img src="[sort:pic]" alt="[sort:name]"/></div>{/pboot:sort}

阅读更多

swiper响应式banner幻灯带字动画

2023-02-16

如下效果,比较常用,参考了人家网站。然后改进了一下字动画。下载链接banner.rar

阅读更多

pbootcms 左侧产品栏目 高亮判断方法

2021-12-02

主要是这段代码。官方演示的不行{pboot:if('[nav:scode]'=='{sort:scode}')}left_active{/pboot:if} {pboot:nav num=6 parent=2} <li><a class="biglink {pboot:if('[nav:scode]'=='{sort:scode}'

阅读更多

pbootcms实现瀑布流“ajax加载更多”“无限下拉”分页调用列表,支持动静态,支持图片延迟加载

2024-05-09

pbootcms实现瀑布流“ajax加载更多”“无限下拉”分页调用列表,,支持动静态,支持图片延迟加载1、页面中引用jquery.js 与 jquery-ias.min.js注意:jquery.js库版本必须大于1.6<scriptsrc='/js/jquery.js'></script><scriptsrc="/js/jquery-ias.min.js"></script>2

阅读更多

pbootcms搜索页面设置不同模板

2023-07-08

<formaction="{pboot:scaction}"method="get">关键字:<inputtype="text"name="keyword"><inp

阅读更多

SQLite 查询本月的数据和查询多少天之内的数据

2021-11-24

SQLite 查询本月的数据select *from ay_diy_jingxiaoshangwhere create_time between datetime('now','start of month','+1 second') anddatetime('now','start of month','+1 month','-1 second')查询多少天之内的数据,查询365天select *from ay_di

阅读更多

Wget windows安装与下载整站命令 可下载https和https

2021-11-30

网站防站利器,比webzip 要好。wget是一个强力方便的命令行下的下载工具windows 如果使用需要安装 Wget for windows下载地址:Link下载压缩包 ZIP,解压到一个常用的安装位置。然后按照下面的步骤,配置环境变量:系统属性(此电脑右击选择属性)→左侧的高级系统属性→环境变量→用户变量选择 Path→点击新建把刚刚压缩到的

阅读更多