如何在WordPress中添加html5播放器,进行视频或音频播放

30

最近小编在自己的网站当中,有很多播放的需求,比如说想添加很多音频和视频,其实在添加视频的时候就遇到了很多的烦恼,不过大家可以看如何在WordPress中添加视频解析接口播放器这篇文章中查看教程。

如何在WordPress中添加html5播放器,进行视频或音频播放

可能还是我的技术不够,或者已经落后了,其实里面的涉及到的技术就是html5,它是通过使用embad标签进行页面调用,其实随着技术的不断革新,现在已经很普及了,我也还奇怪,为什么一些MP3或MP4链接,在浏览器中输入地址就可以播放,原来是用了这项技术。

同样,我也把这个方法分享给大家,希望能给大家带来一些帮助。

1.在WordPress中添加一个html5音频MP3播放器

我记得在某个网站中,这个东西是当做差价售卖的,价格是99元吧,其实利用一个代码就能搞定。而且非常简单。

<audio src="文件名.MP3"></audio>

不用怀疑,你只需要在你的WordPress文章中添加这行代码就可以,当然,这里有个重点,就是在使用的时候一定要记得用html方式编辑。因为我用的是WordPress5.2,编辑器是古腾堡,所以添加起来比较方便,如果你的版本还是老版本,那就记得在html编辑器中添加就可以了。

如何在WordPress中添加html5播放器,进行视频或音频播放

如果说你把上面的代码作为一个可重用模块,每次需要添加的时候,只需要调用就可以,关于这个模块怎么用,大家可以在网上找到相关资料,这里就不多讲了。

2.添加一个视频播放器

对于有视频需要的朋友,你可以通过以下代码进行添加视频播放器。同样记得编辑方式也是在HTML里面进行编辑,否则会显示不出来。

<video src="movie.mp4" controls="controls"></video>

3.升级版,里面添加一些元素

其实我们在使用这些功能的时候,里面还可以添加很多属性,例如宽和高,特别是有一点,就是防止下载,有些资源,我们可能只是作为展示,并不希望用户进行下载,所以我们尽量的要隐藏这些链接。

如果是音频就用
<audio src="文件名.MP3" controlsList="nodownload" oncontextmenu="return false" ></audio>
如果是视频就用
<video src="movie.mp4" controls="controls" controlsList="nodownload" oncontextmenu="return false" ></video>
另外视频播放器需要设置宽和高(根据您的情况自行设置)
<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
</video>

同样,用以上代码就能够实现,当然这种方法只适合普通用户,毕竟人外有人,咱们只是针对普通用户,这种方式,基本上也就满足我们的需求了。

发表意见

Please enter your comment!
Please enter your name here