美文网首页
常见的H5直播格式及解析

常见的H5直播格式及解析

作者: 小小一小只 | 来源:发表于2017-09-05 19:29 被阅读0次

m3u8

学习地址: http://www.cnblogs.com/afrog/p/6689179.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/video.js/6.2.8/alt/video-js-cdn.min.css" rel="stylesheet">
</head>
<body>
<video id="video"  class="video-js vjs-default-skin" controls>
    <source
            src="xxxxxxx.m3u8"   //视频源
            type="application/x-mpegURL">
</video>
<script src="https://cdn.bootcss.com/video.js/6.2.8/video. .js"></script>
<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.10.1/videojs-contrib-hls.min.js"></script>
<script>
    var player = videojs('video');
    player.play();
</script>
</body>
</html>

flv

 <script src="https://cdn.bootcss.com/flv.js/1.3.2/flv.min.js"></script>

<video id="video" ></video>

play(){
     var that=this;
     console.log(this.isPlay)
     if(!flvjs.isSupported()){
           that.paly=function () {
             Toast({
                 message: "您的设备不支持flv播放",
                 className: "toast",
                 position: 'bottom',
                 duration: 1000
             });
          }
           return that.paly()
       }
        this.isPlay=true;
        var video = document.getElementById('video');
        var flvPlayer = flvjs.createPlayer({
                 type: 'flv',
                 url:xxx.flv,  //视频源
         });
          flvPlayer.attachMediaElement(video);
          flvPlayer.load();
          flvPlayer.play();
          that.play=function () {
               if(that.isPlay){
                  video.pause()
                  that.isPlay=false;
                  return
                }
              video.play();
              that.isPlay=true
        }
 },

相关文章

  • 常见的H5直播格式及解析

    m3u8 学习地址: http://www.cnblogs.com/afrog/p/6689179.html flv

  • 05、网络解析

    解析:从事先规定好的格式中提取数据iOS开发常见的解析:XML解析,JSON解析 XML解析 XMl事例: XML...

  • 微信小程序 & H5直播开发从入门到精通

    本文所包含内容: 直播的主流协议 Video属性和方法详解 直播源的制作 H5直播演示 微信小程序直播演示 常见问...

  • 如何 显示富文本

    【假设】后台返回数据格式(H5样式) 如下, 改怎么解析呢? 【答案】 (法1)推荐使用Webview显示: 【...

  • h5调起微信支付一系列问题

    h5 无法调起微信支付错误:商家参数格式有误 1.商家参数格式有误,请联系商家解决 参考微信官方文档罗列的常见错误...

  • 2018-08-22

    SpringMvc初始化流程源码解析及请求加载流程解析 及常见Mvc三剑客在spring-boot中的配置和加载原...

  • JSON XML解析

    JSON,XML解析 解析 解析:从实现规定好的格式中提取数据 解析的前提:提前设定好格式,数据提供方按照格式提供...

  • 每日一个linux命令21-df

    1. 命令解析 命令用途:查看磁盘使用及剩余空间情况 命令格式: df [OPTION]... [FILE]......

  • 常见直播协议及特点

    常见直播协议及特点 m3u8是一种文本协议 HLS--HTTP Live Streaming 原理 通过将整条流切...

  • 网络之数据解析

    解析的基本概念 解析:从事先规定好的格式中提取数据 解析的前提:提前约定好格式,数据提供方按照格式提供格式,数据获...

网友评论

      本文标题:常见的H5直播格式及解析

      本文链接:https://www.haomeiwen.com/subject/ygrpjxtx.html