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

好用的html5 视频播放器 Plyr

ruisui883周前 (04-03)技术分析16

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

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

5个看起来像 MacOS 的 Linux 发行版,赶紧收藏!

既想使用 Linux,又想同时使用 Mac ?那么你可以尝试这些 Linux 发行版,你肯定会觉得自己在用 Mac 系统。1. Elementry OSElementry OS 是看起来像 Mac OS 的最好的 Linux 发行版。和 Mac 一样,这个操作系统也是为了保护隐私而设计的。因此你会得...

2024前端面试真题之—VUE篇

添加图片注释,不超过 140 字(可选)1.vue的生命周期有哪些及每个生命周期做了什么? beforeCreate是new Vue()之后触发的第一个钩子,在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。 created在实例创建完成后发生,当前阶段已...

vue3父子组件传对象,子组件访问修改父组件对象中的属性值

在Vue 3中,父子组件之间的数据传输通常通过props和emit进行。父组件可以通过props向下传递数据给子组件,子组件则可以通过emit向上通知父组件更新数据。如果需要在子组件中修改父组件对象中的属性值,可以使用一个名为ref的Vue 3新特性。以下是一个示例,演示了如何在Vue 3中实现父子...

Windows 下 Git 拉 Gitlab 代码

读者提问:『阿常你好,Windows 下 Git 拉 Gitlab 代码的操作步骤可以分享一下吗?』阿常回答:好的,总共分为五个步骤。一、Windows 下安装 Git官网下载链接:https://git-scm.com/download/winStandalone Installer(安装版)注意...

理解virt、res、shr之间的关系(linux系统篇)

前言想必在linux上写过程序的同学都有分析进程占用多少内存的经历,或者被问到这样的问题——你的程序在运行时占用了多少内存(物理内存)?通常我们可以通过top命令查看进程占用了多少内存。这里我们可以看到VIRT、RES和SHR三个重要的指标,他们分别代表什么意思呢?这是本文需要跟大家一起探讨的问题。...

「云原生」Containerd ctr,crictl 和 nerdctl 命令介绍与实战操作

一、概述作为接替Docker运行时的Containerd在早在Kubernetes1.7时就能直接与Kubelet集成使用,只是大部分时候我们因熟悉Docker,在部署集群时采用了默认的dockershim。在V1.24起的版本的kubelet就彻底移除了dockershim,改为默认使用Conta...