码上敲享录 > 互联网笔记 > html页面播放flv视频

html页面播放flv视频

上一章章节目录下一章 2023-01-08已有1239人阅读 评论(0)

1.html代码

<!DOCTYPE html>

<html>

<head>

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

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

<style>

body,center{

padding:0;

margin:0;

}

   .v-container{

       width:640px;

       height:360px;

border:solid 1px red;

   }

video{

width:100%;

height:100%;

}

</style>

</head>

<body>

 <div class="v-container">

<video id="videoElement" muted autoplay="autoplay" preload="auto" controls="controls">

</video>

 </div>

</body>

</html>

<script>

   

if (flvjs.isSupported()) {

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

       var flvPlayer = flvjs.createPlayer({

           type: 'flv', // 指定视频类型,特别注意此处伟flv

isLive: true, // 开启直播

hasAudio: false, //需要设置为false不然播放不了视频

cors: true,  // 开启跨域访问

url: 'http://192.168.88.88:1934/live/wurenji.flv'

       },

{

           enableWorker: false, //不启用分离线程

           enableStashBuffer: false, //关闭IO隐藏缓冲区

           reuseRedirectedURL: true, //重用301/302重定向url,用于随后的请求,如查找、重新连接等。

           autoCleanupSourceBuffer: true //自动清除缓存

         }

);

       flvPlayer.attachMediaElement(videoElement);

       flvPlayer.load();

       flvPlayer.play();

       // flvPlayer.stop();

   }


</script>



说明:

type:媒体类型,flv 或 mp4,默认 flv
isLive:可选,是否是直播流,默认 true
hasAudio:是否有音频
hasVideo:是否有视频
url:指定流地址,可以是 https(s) or ws(s


0

有建议,请留言!

  • *您的姓名:

  • *所在城市:

  • *您的联系电话:

    *您的QQ:

  • 咨询问题:

  • 提 交