小十的个人博客

@小十

十分之十的小十

文章 339
朋友 14
来访 1812

LATEST POSTS

RANKINGS

  • 郑州
  • www.xiaoten.com
  • 网站成立3213天

小十

  • 努力著

wordpress html5 video备忘

真是够折腾,为了能够在博客里面放视频,最开始尝试的方法就是使用html5自带的<video>标签,因为wordpress自带了MediaElementjs,所以按理说是没啥问题的,结果我应用了存放在七牛云存储上的视频后(使用http协议存放,因为加SSL的贵),然后提示:

Media error: Format(s) not supported or source(s) not found
Download File: http://img.xiaoten.com/PPT-1.mp4?_=1

我当时尝试了好几次还是不行,我以为是wordpress程序的问题,我上网搜了一些html5播放器的插件,首先我尝试了video.js插件,这个插件存在一个很大的问题,就是微信内置浏览器不识别,无法打开。因此用了两天后就尝试新的插件,此时我已经沉浸在各种html5 video的插件中了,尝试过dplayer(带弹幕的一个播放器,是一个大学生的毕设做出来的),还有fvplayer、plyr(这个刚用的时候非常开心,用手机打开后就崩了……)、Smartideo 2(这个只支持视频平台上的视频,例如优酷、youtube这些)、Flowplayer Video Player(自带一个令人难受的水印)、Html5 Video Player(这个是需要后台添加视频)、Easy Video Player(同样有水印)……

尝试了这么多,最后唯一能适合我需求的是dplayer,但是在手机上多了一个页面内全屏这样的鸡肋功能,而且在pc端多了一个显示/隐藏字幕功能,但是很赞的是有变速功能,但是对于我来说这些功能暂时都用不到。

后面转机来了,在我使用dplayer加了视频之后,我又尝试了一下<video>标签,发现竟然能用了,而且手机和PC端都可以,还可以设置自适应页面宽度,毕竟是原生的一个播放器。当时非常开心,已经凌晨四点钟打算睡觉了,激发得一点困意都没有,然后,就把dplayer标签删去,发现又出现了本文最开始的那个错误提示。也就是,只有当这个视频被其他插件正常加载了,这里才能够正常显示,这是为啥?

直到我看到这个页面:https://forums.tumult.com/t/embedding-video-in-a-wordpress-site-http-within-an-https-page/12992/2

来看下看到这个页面时的时间:

已经接近早上6点,天都要亮了,终于发现了原因,SSL和非SSL,在当时本站使用了SSL协议,而七牛云存储那边没有使用,因此出现了这样的问题。
最终把本站的ssl协议关掉后,正常访问。

Comments | NOTHING

  游客,你好 修改资料

*邮箱和昵称必须填写