console 命令行工具 X clear

console

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    Document
  </title>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css"
  rel="stylesheet">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"
  rel="stylesheet">
  <link href="https://cdn.bootcss.com/Buttons/2.0.0/css/buttons.css" rel="stylesheet">
  <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
</head>
<body>

<!-- 引入播放器 js 文件 -->
<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js"></script>
<div style="width:600;" class="video-container" id="video-container"></div>
<button onclick="playVideo()">播放</button>

<script>
    function playVideo(){
	tencentPlay = new TcPlayer('video-container', {
		"m3u8": 'http://172.31.97.233:8808/record/837E0D2FB1E7_193_3410_1/hls.m3u8', //请替换成实际可用的播放地址
		"autoplay" : true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
		"preload": true,
		"poster": { style: "cover", src: '封面图地址'},
		"live": false,
		"width": "100%",
		"height": "100%",
		"x5_type": 'h5',
		listener: function (msg) {
			//console.log(msg.type);
			if(msg.type == 'load') { //加载完事件
				//解决微信浏览器脱离文档流播放的问题；
				//TCPlayerLite文档设置"x5_type": "h5"在安卓微信浏览器不生效，以下代码可解决：
				document.querySelector('video').setAttribute('x5-video-player-type', 'h5-page');
				document.querySelector('video').setAttribute('x5-video-player-fullscreen', 'false');
				document.querySelector('video').setAttribute('x5-video-orientation', 'portrait');
			}									
			if(msg.type == 'ended')
			{//播放完成事件
			}
		}
	});
}

</script>


</body>

 .header {
   background-image: url(http://demo.cssmoban.com/cssthemes4/tops_42_navigator/assets/images/banner.jpg);
   background-attachment: scroll;
   background-position: center center;
   background-size: cover;
 }
 
 .header .content {
   padding: 10% 10%;
   text-align: center;
   color: white;
 }
 
 .header .content h1 {
   font-size: 60px;
   margin: 20px auto;
 }
 
 .header .content p {
   font-size: 35px;
   /* color: gray; */
 }
 
 .header .content button {
   margin-top: 50px;
 }
 
 .aboutus {
   background-color: #f1f1f1;
 }
 
 .aboutus .title {
   margin-top: 50px;
 }
 
 .thumbnail .line {
   border-bottom: 2px solid #999;
   margin: 5px 40% 20px 40%;
   transition: 0.5s all;
 }
 
 .thumbnail:hover .line {
   border-color: greenyellow;
   margin: 5px 35% 20px 35%;
   transition: 0.5s all;
 }
 
 .weare {
   background-color: #28ABE3;
   padding: 100px 0px;
 }