LivePlayer网页直播、点播播放器

资源下载：https://www.liveqing.com/docs/download/LivePlayer.html

使用说明：https://www.liveqing.com/docs/manuals/LivePlayer.html

根据DIV宽高自适应显示播放

<body>

    <div class="dydiv">

        <live-player video-url="http://localhost:10080/vhls/562vgkMZR/562vgkMZR_live.m3u8" aspect="fullscreen">

        </live-player>

    </div>

</body>

<style>

    .dydiv {

        position: relative;

        height:500px;

        width: 400px;

    }

</style>

设置拉伸铺满显示效果

<body>

    <div class="dydiv">

        <live-player video-url="http://localhost:10080/vhls/562vgkMZR/562vgkMZR_live.m3u8" aspect="fullscreen"  stretch="true">

        </live-player>

    </div>

</body>

<style>

    .dydiv {

        position: relative;

        height:500px;

        width: 400px;

    }

</style>

免费WEB播放器LivePlayer.js如何自适应div宽高集成播放视频的更多相关文章

  1. HTML5播放器 MediaElement.js 使用方法

    目前已经有很多html5播放器可以使用,使用html5播放器可以轻松的在页面中插入媒体视频,从而使我们的web页面变得更加丰富多彩,所以今 天向大家推荐一款非常优秀的html5播放器MediaElem ...

  2. JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应  <img src="http://xxx.jpg" id="imgs" onload="ad ...

  3. JS获取图片实际宽高

    JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...

  4. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  5. 前端 JS 获取 Image 图像 宽高 尺寸

    前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...

  6. js自定义获取浏览器宽高

    /** * @description js自定义获取浏览器宽高 * * IE8 和 IE8 以下的浏览器不兼容 * window.innerWidth * window.innerHeight * * ...

  7. PLDroidPlayer 是七牛推出的一款免费的适用于 Android 平台的播放器 SDK，采用全自研的跨平台播放内核，拥有丰富的功能和优异的性能，可高度定制化和二次开发。 https://developer.qiniu.com/pili/sdk/…

    PLDroidPlayer PLDroidPlayer 是一个适用于 Android 平台的音视频播放器 SDK,可高度定制化和二次开发,为 Android 开发者提供了简单.快捷的接口,帮助开发者在 ...

  8. 开源播放器 ijkplayer (四) ：Ijkplayer切换网络时停止播放的问题处理

    问题起因: 在进行ijkplayer播放器的测试时,发现ijkplayer播放器在切换网络时出现直播画面停止的问题. 问题分析: 抓取日志发现:tv.danmaku.ijk.media.player. ...

  9. EasyPlayer-RTSP播放器：从底层到上层专注于RTSP播放Windows、Android、iOS RTSP Player

    EasyPlayer-RTSP播放器是一套RTSP专用的播放器,包括有:Windows(支持IE插件,npapi插件).Android.iOS三个平台,是由EasyDSS团队开发和维护的区别于市面上大 ...

  10. 大半宿，封装了一个MP3播放器的类，写了个简陋的播放器

    用 winmm.lib 写的 封装不是很好,而且没有优化,效率可能有问题,但是现在几乎没有什么大问题 我用我封装的类,写了一个小播放器,界面上的所有功能都实现了,包括双击列表中的文件名,直接播放文件 ...

随机推荐

  1. sql注入绕过某waf

    简单布尔判断 直接输入and 1=1拦截 使用mysql黑魔法 and{a 1=1} and{a 1=2}不拦截 本地mysql测试语句正常执行 简单延时判断 and sleep(1) 简单测试后在( ...

  2. webFlux入门

    今天发现一个特别好的文章,是关于springBoot框架中响应式编程的,那下面就是这位博主所整理的一些干货 ---------------------------------------------- ...

  3. 视频转换 rtsp 流 转rtmp流播放（待完善）

    前言:之前的博客找的rtsp流地址,和按照red5 都是为写这篇文章铺垫. 这篇文章,选择 ffmepg命令 把rtsp流转为rtmp, 接着vlc插件测试下生成的rtmp流. 最后 已经配置好了re ...

  4. vue快速入门~必备基础知识(一)下~过滤器

    过滤器指的是 在不改变data的情况下输出需要的格式数据. 基本的调用方法  一个过滤器 {{ message | filterFun }} new Vue({ //... filters:{ fil ...

  5. Luogu P10144 [WC/CTS2024] 水镜 题解

    P10144 [WC/CTS2024] 水镜 对于任何一段连续上升的区间,我们不需要管它.对于任何一段连续下降的区间,我们只需要用 \(2L\) 减去每个数就可以化为一段连续上升的区间.因此,对于这两 ...

  6. JDK 7 和 JDK 8 的区别

    简介 容易记的 jdk8支持接口可以添加默认方法, default; jdk8支持lambda表达式 jdk7中hashmap解决冲突采用链表, 一旦hash碰撞过多, 可能会使得一个链表上存在多个节 ...

  7. Feature Preserving Octree-Based Hexahedral Meshing

    Feature Preserving Octree-Based Hexahedral Meshing 论文阅读 作者映入了一种新的算法尝试去产生一个纯粹的六面体网格并且不带有自交和正值雅克比.CAD模 ...

  8. Windows Phone应用性能监控与分析技巧

    随着移动互联网的快速发展,用户对应用性能的要求越来越高.Windows Phone作为重要的移动操作系统之一,其应用性能的好坏直接关系到用户体验.本文将详细介绍Windows Phone应用性能监控与 ...

  9. 04Java基础语法之包机制

    包机制 为了更好的组织类,Java提供了包机制,用于区别类名的命名空间. 包语句的语法格式为: package pkg1[. pkg2[. pkg3...]]; 一般会使用公司域名倒置作为包名: 例如 ...

  10. python 中的 defaultdict

    defaultdict 是 Python collections 模块中提供的一个非常有用的字典子类,它允许我们为字典设置默认值工厂函数,当访问不存在的键时自动生成默认值. #_*_ coding:u ...