1.基本使用

 1 <!DOCTYPE html>

 2 <html>

 3

 4 <head>

 5     <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

 6     <title>flv.js demo</title>

 7     <style>

 8         .mainContainer {

 9             display: block;

10             width: 1024px;

11             margin-left: auto;

12             margin-right: auto;

13         }

14     </style>

15 </head>

16 <body>

17 <div class="mainContainer">

18     <video id="videoElement" class="centere dVideo" controls autoplay width="1024" height="576"></video>

19     <button onclick="destoryVideo()">销毁</button>

20 </div>

21 <br>

22 <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.1/flv.min.js"></script>

23 <script>

24

25     var videoElement = document.getElementById('videoElement');

26     if (flvjs.isSupported()) {

27         var flvPlayer = flvjs.createPlayer({

28             type: 'flv',

29             isLive: true,//<====如果是直播，加个这个

30             hasAudio: true,

31             // url:'https://ip:port/live?stream=876543'

32             url: '杞人忧天_标清.flv'

33

34         });

35         flvPlayer.attachMediaElement(videoElement);

36         flvPlayer.load(); //加载

37         flvPlayer.play();

38     }

39

40     function destoryVideo() {

41         if(flvPlayer !='' &&flvPlayer != null){

42             setTimeout(() => {

43                 flvPlayer.pause();

44                 flvPlayer.unload();

45                 flvPlayer.detachMediaElement();

46                 flvPlayer.destroy();

47                 flvPlayer = null;

48             }, 500);

49         }

50     }

51

52     function play() {

53         flvPlayer.unload();

54         flvPlayer.play();

55     }

56 </script>

57 </body>

58

59 </html>

2.如果视频流出现问题，用户又想要一个个性化的提示

1 flvPlayer.on('error', err => {

2      alert("视频流无法连接");

3 });

如果视频流有问题，则会执行这个方法$message就非常好用

flv基本使用和自定义提示的更多相关文章

  1. 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图

    超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...

  2. VaildForm 自定义提示消息

    ValidForm插件提供了7种提示效果,其中有四种自定义效果,具体访问地址:http://validform.rjboy.cn/demo.html 个人偏爱其中两种,即 l 提示效果四:[自定义提示 ...

  3. 在ASP.NET中引用自定义提示框

    在html网页中自定义提示框 正文: 在一般的B/S架构中项目,与用户的交互信息是非常重要的.在一般的情况下,设计人员都在把用户信息呈现在html中,用div和span去弹出相关信息.对于一般的情况而 ...

  4. ACE.js自定义提示实现方法

    ACE.js自定义提示实现方法 时间 2015-11-19 00:55:22  wsztrush's blog 原文  http://wsztrush.github.io/编程技术/2015/11/0 ...

  5. 写了一个迷你toast提示插件，支持自定义提示文字和显示时间

    写了一个迷你toast提示插件,支持自定义提示文字和显示时间,不想用其他第三方的ui插件,又想要toast等小效果来完善交互的同学可以试试, 代码中还贡献了一段css能力检测js工具函数,做项目的时候 ...

  6. vue2.0 自定义 提示框（Toast）组件

    1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var sho ...

  7. 安卓socket 心跳和信鸽自定义提示音

    /** * 连接socket 和心跳 */ public class SocketService extends Service { private static addNewOrderInterfa ...

  8. springboot之additional-spring-configuration-metadata.json自定义提示

    springboot之additional-spring-configuration-metadata.json自定义提示 简介 additional-spring-configuration-met ...

  9. vue 自定义 提示框（Toast）组件

    1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var sho ...

  10. 使提示框居中显示&自定义提示框

    ToastActivity.java文件: 1 public class ToastActivity extends AppCompatActivity { 2 private Button mbtn ...

随机推荐

  1. argo-cd基于Kubernetes的声明式持续部署

    argo-cd基于Kubernetes的声明式持续部署 什么是argo-cd? Argo CD是一个基于Kubernetes的声明式GitOps持续交付工具. 为什么CD ? 应用程序定义.配置和环境 ...

  2. 卸载重装vscode

    最近工作需要长期用到python,但我的老电脑又实在拉不起pycharm那配置,干脆就用vscode了,但本来我的vscode是用来写c/c++的,安装配置一通乱搞,现在也不知道怎么配置回来了. 干脆 ...

  3. 配置springmvc的springmvc.xml

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  4. java基础之数据结构

    一.栈:stack,又称堆栈[出口和入口在同一侧],特点:先进后出(即,存进去的元素,要在后它后面的元素依次取出后,才能取出该元素) 例子:子弹压进弹夹,先压进去的子弹在下面,后压进去的子弹在上面,当 ...

  5. 能用 Java8 开发 MCP（或 MCP Server），这才是 MCP 自由（Solon AI MCP）！

    现在,用 Java 开发 MCP 的情况是: 框架 JDK要求 mcp-sdk 需要 jdk17+ spring-ai-mcp-server 需要 jdk17 + spring-ai-mcp-clie ...

  6. MySQL之profiling性能优化

    如果需要优化一条SQL,想了解一条sql的每个阶段的耗时分布,则可以使用profiling来进行分析,能很方便的定位在哪个阶段.什么资源引起的性能问题. 一.开启profiling参数 此参数默认是关 ...

  7. 偶然发现Git文件夹非常大，使用BGF来处理Git历史Blob文件

    我们使用Git来管理项目的时候,可能会提交一些Blob的二进制文件,这些文件并不能像文本文件一样采用diff delta的形式进行版本控制.如果这些文件一直跟随master的主版本,那么就是属于有效的 ...

  8. Nacos源码—9.Nacos升级gRPC分析四

    大纲 10.gRPC客户端初始化分析 11.gRPC客户端的心跳机制(健康检查) 12.gRPC服务端如何处理客户端的建立连接请求 13.gRPC服务端如何映射各种请求与对应的Handler处理类 1 ...

  9. 关于I/O与并发

    前言 由于笔者在之前发布的一文玩转NGINX中提到过I/O复用模型,在此另起一篇文章简述相关技术. 什么是I/O I/O输入/输出(Input/Output),分为IO设备和IO接口两个部分. 在PO ...

  10. linux窗口透明(全局透明，进程id查找wid，进程名称查找wid)

    linux窗口透明 使用到了qt xcb-ewmh x11-xcb 效果图 如何实现 控制全部窗口透明 1.遍历WID树,的到全部窗口得wid 2.区别窗口属性,桌面和dock窗口不设置透明,其他窗口 ...