可以通过修改video元素的宽度和高度来实现自适应100%播放大小。可以按照以下方式修改代码:

  1. 在playM3u8函数中,在调用hls.attachMedia(video)之前,添加以下代码:
video.style.width = "100%";
video.style.height = "auto";

这将使video元素的宽度自适应父容器的宽度,而高度将根据视频的宽高比自动调整。

  1. 在$("#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%

在下面代码中加入自适应100播放应该这么做function playM3u8url ifHlsisSupported var video = documentgetElementByIdplayer; videovolume = 10; var hls = new Hls; var m3u8Url = decodeURIComponenturl

原文地址: https://www.cveoy.top/t/topic/iImB 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录