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

好用的html5 视频播放器 Plyr

ruisui884周前 (04-03)技术分析17

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

当然你可以用某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” 的相关文章

深度解析!AI智能体在To B领域应用,汽车售后服务落地全攻略

在汽车售后服务领域,AI智能体的应用正带来一场效率和专业度的革命。本文深度解析了一个AI智能体在To B领域的实际应用案例,介绍了AI智能体如何通过提升服务顾问和维修技师的专业度及维修效率,优化汽车售后服务流程。上周我分享了AI智能体+AI小程序To C的AI应用场景《1000%增长!我仅用一个小时...

虚幻引擎5.5现已发布 手游开发、动画制作重大改进

Epic在今天发布了虚幻引擎5.5,现可通过Epic Launcher下载。此版本在动画创作、渲染、虚拟制片、移动端游戏开发和开发人员迭代工具集等方面做出了重大改进。 官方博客:虚幻引擎5.5现已发布,在动画创作、虚拟制作和移动游戏开发方面取得了显著进步,渲染、摄像机内视觉特效和开发人员迭代等领域的...

一文让你彻底搞懂 vue-Router

路由是网络工程里面的专业术语,就是通过互联把信息从源地址传输到目的地址的活动。本质上就是一种对应关系。分为前端路由和后端路由。后端路由:URL 的请求地址与服务器上的资源对应,根据不同的请求地址返回不同的资源。前端路由:在单页面应用中,根据用户触发的事件,改变URL在不刷新页面的前提下,改变显示内容...

基于 vue3.0 小程序拖拽定制

今天给大家分享一个使用Vue3编写的自由DIY小程序页面。mbDIY 一款基于vue3.x构建的可拖拽定制小程序模板。支持新建页面、自由拖拽模块、复制/移动、自定义模块样式等功能。整个项目分为页面、模块、控件三大部分。模块里面的组件可拖拽至主面板区,编辑后保存即可预览效果。快速安装# 克隆项目 gi...

慕课 SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序

本课程以业务驱动技术栈,打造业务相对完整的掌上医疗小程序,解决大家没有好的毕设项目或者求职项目的困境。本课程案例采用前后端分离架构,业务功能完善(既有WEB管理端,也有移动用户端),界面美观,无需艰涩的技术也能做出亮眼的作品。SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序 |...

三勾点餐系统java+springboot+vue3,开源系统小程序点餐系统

项目简述前台实现:用户浏览菜单、菜品分类筛选、查看菜品详情、菜品多属性、菜品加料、添加购物车、购物车结算、个人订单查询、门店自提、外卖配送、菜品打包等。后台实现:菜品管理、订单管理、会员管理、系统管理、权限管理等。 项目介绍三勾点餐系统基于java+springboot+element-plus+u...