当前位置:首页 > 技术分析 > 正文内容

好用的html5 视频播放器 Plyr

ruisui883个月前 (04-03)技术分析26

如果想在自己的网站中播放视频,用哪个播放器好呢?

当然你可以用某ku、某艺的播放。这不是我们今天讨论的东西。

今天我们说说plyr这个播放器;

第一步:引入css文件:

第二步:引入js文件:

<script src="https://cdn.plyr.io/1.8.12/plyr.js"></script>

第三步:书写html结构:

  • 用一个类为plyr的div或者section的标签包裹。

  • 用video标签把视频引入。

    具体参考下面:

  • 具体解释一下代码:

  1. poster= 指封面等号后面为图片所在的路径。

  2. crossorigin 意思为跨域,就是说视频和当前网站不在同一域下。

  3. 2个源分别为mp4和webm文件,为了兼容不同浏览器而提供的。如果没有兼容方面的考虑,可以直接使用一个mp4文件,就可以。

  4. track 标签里的是字幕文件,kind="captions" label="English",kind必须带,

  5. srclang="en"是说字幕语言为英文,

第四步,书写js脚本:很简单,一句话,就是一个初始化:

差点忘了说,下载地址:https://plyr.io/

这样,你就可以在自己的网站上播放自己的视频了。不过小心流量呀!!

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/3273.html

标签: html播放器
分享给朋友:

“好用的html5 视频播放器 Plyr” 的相关文章

2024年10 大 Linux 桌面发行版推荐

年已过半,现在是探究 2024 年最流行的 Linux 发行版的最佳时机。Linux 是一个开源操作系统,构建在 Linux 内核上,并集成了 GNU shell 实用程序、桌面环境、应用程序、包管理系统。由于其通用性、安全性、用户友好性和多样性,它的受欢迎程度超过了其他操作系统。在本文中,我们将从...

Linux发行版需要杀软吗?卡巴斯基推出免费KVRT病毒扫描清理工具

IT之家 6 月 4 日消息,你认为使用 Linux 发行版,需要杀毒软件吗?或许很多用户认为 Linux 发行版偏小众,因此受到黑客攻击的风险也相对较小,不过卡巴斯基并不这么认为,近期推出了适用于 Linux 平台的杀毒软件。最新上线的 Linux 版本 Kaspersky Virus Remov...

快速掌握 Git:程序员必会的版本控制技巧

在现代软件开发中,版本控制系统(VCS)是开发人员不可或缺的工具。无论是个人项目,还是多人协作的团队开发,良好的版本控制都能确保代码管理的高效性与稳定性。而在版本控制系统中,Git 凭借其分布式、灵活性和高效性,成为了最流行的工具之一。几乎所有的开发团队都在使用 Git 来管理代码版本、协作开发和追...

前端路由简介以及vue-router实现原理

作者:muwoo 来源:https://zhuanlan.zhihu.com/p/37730038后端路由简介路由这个概念最先是后端出现的。在以前用模板引擎开发页面时,经常会看到这样http://www.xxx.com/login 大致流程可以看成这样:浏览器发出请求服务器监听到80 端口(或443...

Vue 技术栈(全家桶)

Vue 技术栈(全家桶)尚硅谷前端研究院第 1 章:Vue 核心Vue 简介官网英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/介绍与描述动态构建用户界面的渐进式 JavaScript 框架作者: 尤雨溪Vue 的特点遵循 MVVM 模式编码简洁...

Vue脚手架使用Element UI

关于Element UIElement UI是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开 发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计 资源,帮助网站快速成型。Element UI的官方网址是:https://element.eleme.cn/Elem...