jwplayer小白指南_优秀的网页媒体播放器

jwplayer小白指南

官方网址:https://developer.jwplayer.com/

jwplayer小白指南_优秀的网页媒体播放器

GitHub:https://github.com/jwplayer/jwplayer

简介描述:优秀的网页媒体播放器

JW Player是一款非常优秀的网页媒体播放器,支持H.264 ( .mp4, .mov, .f4v )、FLV ( .flv ) 、3GPP ( .3gp, .3g2 )、OGG Theora ( .ogv )和WebM ( .webm )视频格式,MP3 ( .mp3 )、AAC ( .aac, .m4a )、OGG Vorbis ( .ogg )和WAV ( .wav )音频,同时也支持swf和图片( gif 、jpg、png)和YouTube格式视频。

支持HTML5,有着非常丰富的插件可用(部分是收费的,如广告插件)。

jwplayer使用

<!DOCTYPE html>
<html>
<head>
    <script src='LINK_TO_YOUR_PLAYER'></script>
    <script>jwplayer.key='YOUR_KEY';</script>
</head>
<body>
    <div id="player">Loading the player...</div>
    <script>
        // Setup the player
        const player = jwplayer('player').setup({
            file: 'LINK_TO_YOUR_FILE.mp4'
        });

        // Listen to an event
        player.on('pause', (event) => {
            alert('Why did my user pause their video instead of watching it?');
        });

        // Call the API
        const bumpIt = () => {
            const vol = player.getVolume();
            player.setVolume(vol + 10);
        }
        bumpIt();
    </script>
</body>
</html>

海计划公众号
(0)
上一篇 2020/03/06 09:09
下一篇 2020/03/06 09:09

您可能感兴趣的内容

  • vue打包后静态资源图片失效小白攻略_资源入门指南

    vue打包后静态资源图片失效:老版本中需要找到config/index.js,找build打包对象里的assetsPublicPath属性,默认值为/,更改为./就好了;新版本中只有手动更改vue.config.js, 在里面配置publicPath即可(从vue 3.3开始,baseUrl被废弃,使用publicPath代替)vue动态设置img的src不

    2020/03/20
  • BUI指南教程基于jQuery的富客户端控件库

    BUI基础入门 官方网址:http://www.builive.com/ GitHub:https://github.com/dxq613/bui 简介描述:基于jQuery的富客…

    2020/03/05
  • Pushbar.js带模糊效果的隐藏滑动侧边栏插件小白帮助_插件基础知识入门

    Pushbar.js是一个小巧的Javascript插件,它可以用于在Web应用程序中创建滑动侧边栏效果,还提供模糊效果,就像开关抽屉的效果。你可以完全定制效果,它不依赖任何第三方库,你可以使用它作为侧栏菜单或者操作选项滑出效果。如何使用1.引入文件在页面中引入pushbar.js和pushbar.css文件。<link href="dist/css/pus

    2020/03/29
  • Keyboard小白帮助_处理键盘输入、支持简单的组合按键并且支持不同LOCALE的js库

    Keyboard零基础入门 官方网址:http://mottie.github.io/Keyboard/ GitHub:https://github.com/Mottie/Keyb…

    2020/03/06
  • 通过实例学习正则表达式菜鸟教程_正则新手入门

    判断邮箱是否正确邮箱正则/\w+[\w\.]*@[\w\.]+\.\w+/测试用例const regex = /\w+[\w\.]*@[\w\.]+\.\w+/regex.test(‘666@email.com’) // true
    regex.test(‘july@e.c’) // true

    2020/03/24
  • bounce.js基础指南可视化CSS3动画代码生成js库插件

    bounce.js基础入门 官方网址:http://bouncejs.com/ GitHub:https://github.com/tictail/bounce.js 简介描述:可…

    2020/03/05
  • 注入理解依赖注入(控制反转)小白入门_注入小白入门

    前端的技术的极速发展,对前端同学来说也是一个不小的挑战,有各种各样的东西需要学,在开发过程中经常会被后端同学嘲讽,对于前端来讲根本就不存在类的概念,很多时候需要把大量的业务代码堆积在页面或者组件中,使组件和页面变得特别的臃肿,一旦业务逻辑复杂的情况下,及时组件化做的很好,仍然避免不了难以维护。之所以会被后端同学嘲讽,一基础掌握不扎实,对前端理解不到位,二缺乏

    2020/03/26
  • 使用CSS实现图片帧动画与曲线运动入门百科_动画使用帮助

    写在前面在前端开发中,提到动画,我们可以:直接利用DOM实现动画。利用canvas实现动画。利用svg实现动画。直接用一张gif动图。利用图片实现帧动画。…所有动画的基本原理都是:在短时间内连续依次展示对应的图片,这样在视觉上看起来就是’动’的了。本文主要来说一说第4点和第5点。图片帧动画当我们要实现的动画效果比较复杂,而且开发排期比较紧的情况下,用一张

    2020/03/24
  • 如何打造一个高权重的网站?使用说明_权重零基础入门

    拥有一个高权重的网站,相信是各位站长一直以来的梦想。每天看着别人高权重、多流量的网站暗自羡慕,自己在想总有一天我也会做到一天10万IP,但想象归想象,总要回到现实面对着自己那个一天几十到几百IP的网站,那么一个高权重的网站是如何打造的?首先我们要搞清楚什么是网站权重?网站权重是指搜索引擎给网站(包括网页)赋予一定的权威值,对网站(含网页)权威的整体评分。一个

    2020/03/30
  • Vue 添加响应式属性菜鸟指南_响应式基础知识教程

    此文使用的 Vue 版本是 2.0+,在线例子看这里,下面顺便也把关键代码贴出来。

    2020/03/26
  • 华为员工离职感慨:选择确实比努力重要入门基础知识_离职使用教程

    职场就像围城,我们每一个职场人总是以“墙外”的视角羡慕着“墙内”的世界,而也许你的生活也出现在别人的梦中。今天,笔者给大家分享一下一位华为员工即将离职的“惯例”心声。让我们一起了解一下华为基层员工最原始的生活状态。希望这些“干货”能让你认识到不一样的华为。1. 无论有多少个下家给我offer,无论待遇提升了多少,无论前景有多么可期,就华为的这段经历而言,我仍

    2020/03/24
  • DOM如何渲染大量千级万级数据页面也不会卡住小白指南_dom零基础入门

    一个例子是创建 WebQQ 的 QQ 好友列表。列表中通常会有成百上千个好友,如果一个好友,用一个节点来表示,当我们在页面中渲染这个列表的时候,可能要一次性往页面中创建成百上千个节点。在短时间内往页面中大量添加 DOM 节点显然也会让浏览器吃不消,我们看到的结果往往就是浏览器的卡顿甚至假死。代码如下:var ary = [];
    for ( var i = 1

    2020/03/24
  • React中获取数据的3种方法:哪种最好?基础教程_数据入门百科

    在执行 I/O 操作(例如数据提取)时,要先发送网络请求,然后等待响应,接着将响应数据保存到组件的状态,最后进行渲染。在 React 中生命周期方法、Hooks和 Suspense是获取数据的方法。接下用事例演示一下如何使用它们并说明每种方法的优点和缺点,以便咱们更好的编写异步操作代码。1.使用生命周期方法请求数据应用程序Employees.org做两件事:

    2020/03/23
  • AndroidUX入门教程_安卓设备UI设计欣赏及文章

    AndroidUX基础入门 官方网址:http://androidux.com/ 简介描述:安卓设备UI设计欣赏及文章 The first android app pattern …

    2020/03/06
  • 利用CSS注入(无iFrames)窃取CSRF令牌新手入门_安全作者: 转载使用指南

    CSS相信大家不会陌生,在百度百科中它的解释是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。那么,它仅仅只是一种用来表示样式的语言吗?当然不是!其实早在几年前,CSS就已被安全研究人员运用于渗透测试当中。这里有一篇文章就为我们详细介绍了一种,使用属性选择器和iFrame,并通过CSS注入来窃取

    2020/04/05
  • css清除浮动的原理小白教程_浮动小白基础

    最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解,如果你已经很了解什么是浮动和浮动的效果,你可以直接跳转到三.如何清除浮动(重点)阅读一.什么是浮动首先我们需要知道定位 元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位方式 1、

    2020/03/30