极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
document.documentElement.style.fontSize = $(document.documentElement).width() / 7.5 + 'px';
$(window).on('resize', function() {
document.documentElement.style.fontSize = $(document.documentElement).width() / 7.5 + 'px';
});
</script>
<style>
* {
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;
}
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.js"></script>
<div class="video_layout">
<div class="player-container">
<div class="player-box">
<video id="videoElement" width="100%" height="100%"></video>
</div>
</div>
</div>
<script>
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")
});
</script>
</body>
</html>在chrome 模拟器上可以跑起来 用真机 没有画面
html5
建议在flvjs.isSupported()后接个判断 看看是否机器不支持