在下面代码中加入自适应100播放应该这么做function playM3u8url ifHlsisSupported var video = documentgetElementByIdplayer; videovolume = 10; var hls = new Hls; var m3u8Url = decodeURIComponenturl
可以通过修改video元素的宽度和高度来实现自适应100%播放大小。可以按照以下方式修改代码:
- 在playM3u8函数中,在调用hls.attachMedia(video)之前,添加以下代码:
video.style.width = "100%";
video.style.height = "auto";
这将使video元素的宽度自适应父容器的宽度,而高度将根据视频的宽高比自动调整。
- 在$("#str-post").submit函数中,在调用playM3u8之前,添加以下代码:
var video = document.getElementById('player');
video.style.width = "100%";
video.style.height = "auto";
这将在播放新的视频之前,将之前播放的视频的大小重置为自适应100%播放大小。
修改后的代码如下:
function playM3u8(url){
if(Hls.isSupported()) {
var video = document.getElementById('player');
video.volume = 1.0;
video.style.width = "100%";
video.style.height = "auto";
var hls = new Hls();
var m3u8Url = decodeURIComponent(url);
hls.loadSource(m3u8Url);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
}
$("#str-post").submit(function () {
$("html,body").animate({
scrollTop: $(".input-div").offset().top - 20
}, 200);
var video = document.getElementById('player');
video.style.width = "100%";
video.style.height = "auto";
playM3u8($("#str-post").serializeArray()[0].value);
return false;
})
这样修改后,视频播放的大小将自适应为100%
原文地址: https://www.cveoy.top/t/topic/iImB 著作权归作者所有。请勿转载和采集!