.Dvideo-content{
	.Dvideo-ctrl{
		position:absolute;
		bottom:- $ctrl_height;
		height:$ctrl_height;
		background:$ctrl_bg;
		width:100%;
		left:0;
		right:0;
		@include transition(all $duration_time ease);
		// @include opacity(0);
		// visibility:hidden;
		font-size: 0;
		&.active{
			// @include opacity(1);
			// visibility:visible;
			bottom:0;
		}
		&:before{
			content: '';
			position:absolute;
			left: 0;
			right: 0;
			bottom: $ctrl_height;
			height: 10px;
			background: transparent;
		}
		.Dvideo-detail{
			width: 100%;
			height: 100%;
			font-size: 0;
			position: relative;
			.Dvideo-ctrl-state{
				@include inline-block;
				width: auto;
				height: 100%;
				padding:0 8px;
				text-align: center;
				&:after{
					content:'';
					@include inline-block;
					width:0;
					height:100%;
					vertical-align:middle;
				}
				.Dvideo-ctrl-playPause{
					@include inline-block;
					vertical-align: middle;
					color: #fff;
					font-size: 24px;
					margin-right: 16px;
					cursor: pointer;
					&:hover{
						color: $primary_color;
					}
				}
				.Dvideo-ctrl-next{
					@include inline-block;
					vertical-align: middle;
					color: #fff;
					font-size: 20px;
					cursor: pointer;
					&:hover{
						color: $primary_color;
					}
				}
			}
			.Dvideo-time-content{
				@include inline-block;
				width: auto;
				color: $icon_color;
				font-size: 0;
				font-weight: 200;
				.Dvideo-text-current,.Dvideo-text-duration{
					@include inline-block;
					font-size: 12px;
					width: 50px;
					text-align: center;
					position:relative;
				}
				.Dvideo-text-duration:before{
					content: '/';
					position: absolute;
					top: 50%;
					left: 0;
					color: #fff;
					@include translate(-50%,-50%);
				}
			}
			.Dvideo-menu-right-content{
				position:absolute;
				top: 0;
				right: 0;
				height: 100%;
				width: auto;
				// padding-right: 10px;
				&:after{
					content:'';
					@include inline-block;
					width:0;
					height:100%;
					vertical-align:middle;
				}

				i{
					@include inline-block;
					font-size: 16px;
					color: $icon_color;
					vertical-align: middle;
					cursor: pointer;
					margin: 0 10px;
					&:hover{
						color: $primary_color;
					}
				}
				.Dvideo-playbackRate{
					color: $icon_color;
					width: 35px;
					height: 100%;
					@include inline-block;
					margin: 0 10px;
					@include box-sizing(border-box);
					cursor: pointer;
					text-align: center;
					font-size: 12px;
					position:relative;
					color: $icon_color;
					.Dvideo-playbackRateText{
						color: $ctrl_bg;
						width: 35px;
						height: 14px;
						margin: calc((100% - 14px) / 2) 0;
						vertical-align: middle;
						@include inline-block;
						padding: 2px 0;
						@include border-radius(2px);
						background: $icon_color;
						cursor: pointer;
						position:relative;
						@include transition(background 0.3s);

					}
					.Dvideo-playbackRate-content{
						display: none;
						position: absolute;
						bottom: 100%;
						background:$ctrl_bg;
						padding-bottom: 10px;
						width: 60px;
						height: auto;
						left: 50%;
						z-index: 3;
						@include translate(-50%,0);
						&.active{
							display: block;
						}
						.Dvideo-playbackRate-list{
							display: block;
							width: 100%;
							height: 30px;
							line-height: 30px;
							color: $icon_color;
							&.active{
								color: $primary_color;
							}
							&:hover{
								background: $rate_hover_color;
							}
						}
					}
					&:hover{
						.Dvideo-playbackRateText{
							background: $primary_color;
						}
					}
				}
				.Dvideo-definition{
					color: $icon_color;
					width: 35px;
					height: 100%;
					@include inline-block;
					margin: 0 10px;
					@include box-sizing(border-box);
					cursor: pointer;
					text-align: center;
					font-size: 12px;
					position:relative;
					color: $icon_color;
					.Dvideo-definitionText{
						color: $ctrl_bg;
						width: 35px;
						height: 14px;
						margin: calc((100% - 14px) / 2) 0;
						vertical-align: middle;
						@include inline-block;
						padding: 2px 0;
						@include border-radius(2px);
						background: $icon_color;
						cursor: pointer;
						position:relative;
						@include transition(background 0.3s);
					}
					.Dvideo-definition-content{
						display: none;
						position: absolute;
						bottom: 100%;
						background:$ctrl_bg;
						padding-bottom: 10px;
						width: 60px;
						height: auto;
						left: 50%;
						z-index: 3;
						@include translate(-50%,0);
						&.active{
							display: block;
						}
						.Dvideo-definition-list{
							display: block;
							width: 100%;
							height: 30px;
							line-height: 30px;
							color: $icon_color;
							&.active{
								color: $primary_color;
							}
							&:hover{
								background: $rate_hover_color;
							}
						}
					}
					&:hover{
						.Dvideo-definitionText{
							background: $primary_color;
						}
					}
				}
				.Dvideo-volume{
					display: inline-block;
					font-size: 16px;
					position: relative;
					width: 100px;
					height: 2px;
					background:$progress_buffered_bg;
					margin-right: 15px;
					cursor: pointer;
					&:before{
						content: '';
						position: absolute;
						top: -8px;
						left: 0;
						height: 8px;
						right: 0;
						z-index: 9;
					}
					&:after{
						content: '';
						position: absolute;
						bottom: -8px;
						left: 0;
						height: 8px;
						right: 0;
						z-index: 9;
					}

					&.none{
						display: none;
					}

					.Dvideo-volume-P{
						width: 100%;
						height: 2px;
						@include border-radius(1px);
						background:$volume_auto_bg;
						.Dvideo-volume-R{
							width: 80%;
							height: 2px;
							@include border-radius(1px);
							background:$volume_real_bg;
						}
					}
					.Dvideo-volume-range{
						width: 12px;
						height: 12px;
						position:absolute;
						top: 0;
						left:80%;
						// @include translate(-50%,0);
						margin-left: -6px;
						margin-top: -5px;
						@include border-radius(50%);
						background:#fff;
						z-index: 10;
						cursor: pointer;
						&:hover{
							&:before{
								content: attr(data-volume);
								position:absolute;
								top: -30px;
								left: 50%;
								@include translate(-50%,0);
								width: 42px;
								height: 22px;
								line-height: 22px;
								text-align: center;
								color: #fff;
								font-size: 12px;
								background: $progress_auto_bg;
								@include border-radius(3px);
							}
							&:after{
								content: '';
								position:absolute;
								top: -8px;
								left: 50%;
								@include translate(-50%,0);
								width: 0;
								height: 0;
								border-top:6px solid $progress_auto_bg;
								border-left:6px solid transparent;
								border-right:6px solid transparent;
								border-bottom:6px solid transparent;
							}
						}
					}
				}
			}
		}
		.Dvideo-progress-content{
			height: 2px;
			width: 100%;
			cursor: pointer;
			position:absolute;
			bottom: $ctrl_height;
			background:$progress_auto_bg;
			z-index: 2;
			.Dvideo-progress-detail{
				height: 100%;
				width: 100%;
				.Dvideo-progress-buffered{
					width: 0;
					height: 100%;
					background:$progress_buffered_bg;
					position:absolute;
					top: 0;
					left: 0;
					@include transition(width 0.3s);
				}
				.Dvideo-progress-real{
					width: 0%;
					height: 100%;
					// background:$primary_color;
					@include background(linear-gradient(to right, $primary_color 70%, #fff));
					position: relative;
					@include transition(width 0.3s);
				}
			}
			.Dvideo-circle-range{
				display: none;
				position:absolute;
				top: -5px;
				left: 0;
				margin-left: -7px;
				width: 14px;
				height: 14px;
				background: #fff;
				@include border-radius(50%);
				&:after{
					content: '';
					position:absolute;
					top:50%;
					left: 50%;
					width: 6px;
					height: 6px;
					@include border-radius(50%);
					background: $primary_color;
					@include translate(-50%,-50%);
				}
			}
			&.active{
				height: 4px;
				.Dvideo-progress-detail{
					.Dvideo-progress-real{
						@include transition(none);
					}
				}
				.Dvideo-circle-range{
					display: block;
				}
			}
		}
		.Dvideo-tips-info{
			position:absolute;
			left: 0;
			right: 0;
			bottom: $ctrl_height;
			height: 28px;
			line-height: 28px;
			z-index: 1;
			background: transparent;
			color: #fff;
		    font-size: 12px;
		    padding: 0 5px;
		    @include box-sizing(border-box);
		    display:block;
		    &.hide{
		    	display:none;
		    }
		}
	}

	.Dvideo-header{
		position:absolute;
		top:0;
		height:$header_height;
		line-height: $header_height;
		background:$ctrl_bg;
		width:100%;
		left:0;
		right:0;
		@include transition(all $duration_time ease);
		@include opacity(0);
		visibility:hidden;
		&.active{
			@include opacity(1);
			visibility:visible;
		}
		// 头部文字内容
		.Dvideo-header-title{
			width: 80%;
			height: 100%;
			padding: 0 $padding_leftright;
			font-size: 14px;
			color: $text_deep_color;
			@include ellipsis();
		}
	}

	&.full{
		.Dvideo-ctrl{
			.Dvideo-detail{
				.Dvideo-menu-right-content{
					.Dvideo-volume{
						@include inline-block;
						font-size: 16px;
						margin-right: 50px;
						&.none{
							@include inline-block;
						}
					}
				}
			}
		}
	}

	&.gradient{
		.Dvideo-ctrl{
			@include background(linear-gradient(to top, $ctrl_bg_opacity, transparent));
			.Dvideo-detail{
				.Dvideo-time-content{
					color: $icon_color_opacity;
				}
				.Dvideo-menu-right-content{
					i{
						color: $icon_color_opacity;
					}
				}
				.Dvideo-playbackRate{
					background: $icon_color_opacity;
					.Dvideo-playbackRate-content{
						background: transparent;
						.Dvideo-playbackRate-list{
							color: $icon_color_opacity;
							background: $icon_color_opacity;
							&:active{
								color: $primary_color_opacity;
							}
							&:hover{
								background:$rate_hover_color_opacity;
							}
						}
					}
				}
				.Dvideo-definition{
					background:$icon_color_opacity;
					.Dvideo-definition-content{
						background: transparent;
						.Dvideo-definition-list{
							color: $icon_color_opacity;
							background: $icon_color_opacity;
							&.active{
								color: $primary_color_opacity;
							}
							&:hover{
								background: $rate_hover_color_opacity;
							}
						}
					}
				}
			}
			.Dvideo-progress-content{
				width: calc(100% - 20px);
				left: 50%;
				@include border-radius(2px);
				@include translate(-50%,0);
				background:$progress_auto_bg_opacity;
				.Dvideo-progress-detail{
					.Dvideo-progress-buffered{
						background:$progress_buffered_bg_opacity;
					}
					.Dvideo-progress-real{
						@include background(linear-gradient(to right, $progress_real_bg_opacity_deep , $progress_real_bg_opacity));
					}
				}
			}
		}
		.Dvideo-header{
			@include background(linear-gradient(to bottom, $ctrl_bg_opacity, transparent));
		}
	}
}