时间戳

首页 > 解决方案 > 如何根据随机播放的视频在 html 中显示文本？

javascript - 如何根据随机播放的视频在 html 中显示文本？

问题描述

我希望根据随机播放的视频显示文本，并将文本分配给该特定视频，如果播放该视频，则仅应显示分配给该视频的特定文本。 

var videos = [{
    id: 1,
    url: "https://www.youtube.com/embed/k47u9tduwb8?autoplay=1"
  },
  {
    id: 2,
    url: "https://www.youtube.com/embed/lJ6osaYFSIA?autoplay=1"
  }
];

window.onload = function() {
  var playerDiv = document.getElementById("random_player");
  var player = document.createElement("IFRAME");
  var previousId = localStorage.getItem('previousId');
  if (previousId) {
    var previousIndex = videos.findIndex(v => v.id === parseInt(previousId));
    videos.splice(previousIndex, 1);
  }
  var current = Math.floor(Math.random() * videos.length);
  localStorage.setItem('previousId', videos[current].id);
  localStorage.getItem('previousId');
  var randomVideoUrl = videos[current].url;
  player.setAttribute('width', '640');
  player.setAttribute('height', '390');
  player.setAttribute('src', randomVideoUrl);
  playerDiv.appendChild(player);
};
<div id="random_player"></div>

标签： javascripthtml

解决方案

确保在浏览器中运行代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Insert HTML inside an iFrame</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
body {
  background: #333;
}
.video-container {
  position: relative;
}
iframe {
  height: auto;
  vertical-align: middle;
  width: 100%;
}
.overlay-desc {
  background: rgba(0,0,0,0);
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
h1 {
  color: white;
  font-family: 'Nobile', sans-serif;
  font-size: 9vw;
  text-align: center;
}

main {
  margin: 0 auto;
  width: 80%;
}

p {
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.1rem;
  line-height: 1.7rem;
}
 
</style>

<script>
      var videos = [
        {id:1 , url:"https://www.youtube.com/embed/k47u9tduwb8?autoplay=1"},
        {id:2 , url:"https://www.youtube.com/embed/lJ6osaYFSIA?autoplay=1"}      
      ];

      window.onload = function () {
	    //  document.getElementById('myIframe').src = videos[Math.floor(Math.random() * videos.length)];

		  /*
	         var player = document.getElementsByTagName("video")[0];
			 var sources = player.getElementsByTagName('source');
			
			sources[0].src = 'https://www.youtube.com/embed/lJ6osaYFSIA?autoplay=1';
			player.load(); */
			
			 var playerDiv = document.getElementById("video-container");
        var player = document.createElement("IFRAME");
      /*  var previousId = localStorage.getItem('previousId');
        if(previousId) {
          var previousIndex = videos.findIndex(v => v.id === parseInt(previousId));
          videos.splice(previousIndex, 1);
        }
    
        localStorage.setItem('previousId', videos[current].id);
        localStorage.getItem('previousId');
        */
            var current = Math.floor(Math.random() * videos.length);
        var randomVideoUrl = videos[current].url;
        player.setAttribute('width', '640');
        player.setAttribute('height', '390');
        player.setAttribute('src', randomVideoUrl);
		console.log(player)
        playerDiv.appendChild(player);
	 }
	  </script>
</head>
<body>
   <link href='https://fonts.googleapis.com/css?family=Nobile:700,400' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Gafata|Open+Sans:300' rel='stylesheet' type='text/css'>

<div id="video-container" class="video-container">
	<!--   <video id="video" autoplay loop muted>
		     <source id="source" src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">
		     Your browser does not support the video tag.
	   </video> -->
	   <!--<iframe id="myIframe" ></iframe> -->

	   
     <div class="overlay-desc">
        <h1>Video Title</h1>
     </div>
	</div>





</body>
</html>

推荐阅读