码上敲享录 > 最全面的HTML入门教程 > html前端页面如何播放flv视频,直接上代码

html前端页面如何播放flv视频,直接上代码

上一章章节目录 2025-05-24已有12人阅读 评论(0)

html前端页面如何播放flv视频,直接上代码


解决方法:

<!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 或 mp4,默认 flv

isLive: true, // 开启直播

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

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

url: 'http://192.168.88.80:8081/live/aa.flv'

       },

{

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

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

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

           autoCleanupSourceBuffer: true //自动清除缓存

         }

);



       flvPlayer.attachMediaElement(videoElement);

       flvPlayer.load();

       flvPlayer.play();

       // flvPlayer.stop();

   }


</script>


0

有建议,请留言!

  • *您的姓名:

  • *所在城市:

  • *您的联系电话:

    *您的QQ:

  • 咨询问题:

  • 提 交