不使用flash插件直接使用浏览器访问直播，并且页面初始化时全屏显示问题

最新推荐文章于 2022-10-27 15:21:22 发布

热情不减

最新推荐文章于 2022-10-27 15:21:22 发布

阅读量530

点赞数 1

文章标签： html5 css3 javascript

本文链接：https://blog.csdn.net/SunGuangHuiM/article/details/122087231

版权

var h = $(window).height() -16;
$("#videoElement").width(w);
$("#videoElement").height(h);

首先需要引用flv.min.js，我这里直接在网上找的，地址:https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.1/flv.min.js 可以复制下来放在本地就是文件中

<script type="text/javascript">
    var src = '<%=ShiPUrl %> ';
    if (flvjs.isSupported()) {//检查flvjs能否正常使用
        var w = $(window).width()-12;
        var h = $(window).height() -16;
        $("#videoElement").width(w);
        $("#videoElement").height(h);
        var videoElement = document.getElementById('videoElement'); //使用id选择器找到第二步设置的dom元素
        var flvPlayer = flvjs.createPlayer({//创建一个新的flv播放器对象
            type: 'flv', //类型flv
            url: src //flv文件地址
        });
        flvPlayer.attachMediaElement(videoElement); //将flv视频装载进video元素内
        flvPlayer.load(); //载入视频
        flvPlayer.play(); //播放视频，如果不想要自动播放，去掉本行
    }
</script>

写JS事件

这两天做项目遇到了直播问题，页面初始化时需要全屏显示，在网上看了很多文章，大部门全屏都是requestFullscreen这api实现，

var de = document.documentElement;

de.requestFullscreen();

但是这个方法只能用户交互的时候才能实现全屏，这里使用的是JS中给video控件设置它的宽和高，让它占满浏览器，首先给video控件设置 object-fit: fill;样式，使视频撑满容器然后在JS中动态给video控件设置宽和高。
var w = $(window).width()-12;