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. FastAPI安全认证中的依赖组合

    title: FastAPI安全认证中的依赖组合 date: 2025/04/12 00:44:08 updated: 2025/04/12 00:44:08 author: cmdragon exc ...

  2. @ResponseBody 响应 json 数据

    /** * 将json数据封装到bean对象中条件: * 1:json数据中的key名必须和bean对象的属性相同 * 2:添加jsonjar包的支持 * 作用:使用@ResponseBody 注解实 ...

  3. SpringAI版本更新：向量数据库不可用的解决方案！

    Spring AI 前两天(4.10 日)更新了 1.0.0-M7 版本后,原来的 SimpleVectorStore 内存级别的向量数据库就不能用了,Spring AI 将其全部源码删除了. 此时我 ...

  4. 解决React Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

    问题 当我使用如下方式调用组件子组件UploadModal并且绑定Ref时React报错"Warning: Function components cannot be given refs. ...

  5. RabbitMQ发布确认及备份交换机

    RabbitMQ发布确认及备份交换机 可以通过设置RabbitMQ的发布确认和失败回退功能来确认消息是否成功发布. 也可以为交换机设置备份交换机,来接收不可路由的消息. demo结构 配置及实现 ap ...

  6. ServletContext相关

    简介 如何得到对象 有什么作用 1.获取全局配置参数 2.获取web工程中的资源 3.存取数据,servlet间共享数据 域对象 ServlerContext的生命周期 ServletContext ...

  7. <HarmonyOS第一课11>合理使用动画和转场#鸿蒙课程##鸿蒙生态#

    课程简介 <HarmonyOS第一课:合理使用动画和转场>是专为HarmonyOS开发者设计的课程,旨在教授如何在应用开发中合理运用动画和转场效果.课程首先强调动画在提升用户体验中的重要性 ...

  8. Docker手册

    docker手册 安装 # 移除旧版本dockersudo yum remove docker \                  docker-client \                  ...

  9. VS Code上配置python虚拟环境

    1.首先在Vs Code的terminal中输入: py -3 -m venv .venv .venv\scripts\activate 2.一般报错如下: 3.解决方法: 第一步:以管理员身份运行p ...

  10. sympy简明用法

    系统学习Sympy 什么是Sympy Sympy 是一个可以进行符号运算的第三方科学计算库,数学对象可以被精确的表达,而不是近似值,这也意味着带有未计算的未知量可以以符号的形式留在数学表达式中. im ...