博客内容涉及前端视频播放的实现，使用了flvjs库来加载和播放MP4视频。在Chrome模拟器上能正常运行，但在真机设备上出现画面缺失的问题。点击事件会导致视频全屏显示，但问题仍未解决。
document.documentElement.style.fontSize = $(document.documentElement).width() / 7.5 + 'px';
$(window).on('resize', function() {
document.documentElement.style.fontSize = $(document.documentElement).width() / 7.5 + 'px';
});
* {
margin: 0;
padding: 0;
}
.video_layout {
position: relative;
background-color: #fff;
z-index: 100;
width: 100%;
height: 4.22rem;
}
.video_layout .player-container {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
.video_layout .player-container .player-box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.player-container .player-box.wide {
position: fixed;
width: auto;
height: auto;
}
.player-container .player-box video {
background: #000;
display: inline;
object-fit: contain;
}
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'mp4',
width: "100%",
url: "http://video.payplay.com.cn/5c843971c43c440a812b8905eed283b7/bb427b092f484808b393c91616775c64-73bba532dde4dae57193961d09a93699.mp4"
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
$(document).on("click", function() {
$(" .video_layout .player-container .player-box").addClass("wide")
});
在chrome 模拟器上可以跑起来 用真机 没有画面
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
