效果:(视频和音频,看起来一样,只是代码有些小区别)
播放条实现:
ShareArticle.html:
<div class="audioControl appletsControl playControlMenu">
<!-- 播放条 -->
<div class="appletsProgress">
<div class="boxprogress">
<div class="progress-bar">
<div class="now" data-attr=''></div>
</div>
</div>
<div class="startEndNum" style="display:none;"><span class="start"></span><span class="end"></span></div>
</div>
<!-- 控制按钮 -->
<ul class="ac-item">
<li><a id="speed"><img class="appletsNewSize" src="https://static.eudic.net/web/ting/applets/applet1.0x.png"></a></li>
<li><a id="pre"><img src="https://static.eudic.net/web/ting/applets/icon_left_normal.png"></a></li>
<li class="playPar"><a id="play"><img src="https://static.eudic.net/web/ting/applets/icon_play_normal.png"></a></li>
<li class="pausePar"><a id="pause"><img src="https://static.eudic.net/web/ting/applets/icon_stop_normal.png"></a></li>
<li><a id="next"><img src="https://static.eudic.net/web/ting/applets/icon_right_normal.png"></a></li>
<li><a id="position"><img class="appletsNewSize positionSize" src="https://static.eudic.net/web/ting/applets/highlight_nor.png"></a></li>
</ul>
</div>
<!-- 播放倍速 start -->
<ul class="appletsControlUlSpeed">
<li class="liSpeed" data-speed="0.6">0.6x</li>
<li class="liSpeed" data-speed="0.8">0.8x</li>
<li class="liSpeed high_light" data-speed="1.0">1.0x</li>
<li class="liSpeed" data-speed="1.2">1.2x</li>
<li class="liSpeed" data-speed="1.4">1.4x</li>
<li class="liSpeed" data-speed="1.6" >1.6x</li>
<li class="liSpeed" data-speed="1.8">1.8x</li>
<li class="liSpeed" data-speed="2.0">2.0x</li>
</ul>
<!-- 播放倍速 end -->
音频播放的js:(播放条代码在 “播放进度条 start ”和 “播放进度条 end ” 这个注释之间)
// 音频播放控制菜单
//音频播放
var Play = (function() {
var timeRange, orderIndex;
var transfered = [],
origin = [];
var highlightCls = 'high_light';
function getOrder() {
var value, search = location.search;
if (!search) {
orderIndex = 0;
} else {
search = location.search.split('?')[1].split('&');
for (var i = 0, l = search.length; i < l; i++) {
value = search[i].split('=');
if (value[0] == 'order') {
if (value[1] == 'undefined') {
orderIndex = 0;
} else {
orderIndex = parseInt(value[1]);
}
return orderIndex;
}
}
}
return 0;
}
function initPage(specialT) {
if (specialT) {
var speTitle = $('<p class="spmobiletitle">' + specialT + '</p>');
$('h1').next().before(speTitle);
}
$('.site a').text(location.host + '/ting').attr('href', 'http://' + location.host + '/ting');
$('a').bind('touchstart', function() {
$(this).attr('class', 'hover');
}).bind('touchend', function() {
$(this).attr('class', '');
});
var h1Sentence = $('h1 .sentence');
if (h1Sentence) {
h1Sentence.removeClass('sentence');
}
}
function initSoundSegment() {
var htmlsource = document.body.innerHTML;
var htmlsource1 = document.getElementById("article").innerHTML;
var v1 = htmlsource1.match(/[0-5][0-9]\:[0-5][0-9]\.[0-9][0-9]/g);
var v2 = htmlsource1.match(/([0-1][0-9]|2[0-3])\:[0-5][0-9]\:[0-5][0-9]/g);
if (v1 != null) {
document.body.innerHTML = htmlsource.replace(/(["_,])(\d\d:\d\d\.\d\d)/g, '$100:$2');
}
if (v2 != null) {
document.body.innerHTML = htmlsource.replace(/(["_,])(\d\d:\d\d:\d\d)/g, '$1$2.00');
}
timeRange = $('#J_CIKU_sentence_time_range').val().split(',');
for (var i = 0, l = timeRange.length; i < l; i++) {
origin.push(timeRange[i]);
var time = timeRange[i].split('.')[0].split(':'), s;
s = time[0] * 3600 + time[1] * 60 + time[2] * 100 / 100;
s += timeRange[i].split('.')[1] / 100;
s *= 1000;
transfered.push(s);
}
}
var AudioPlay = function(audio, play, pause, next, pre,position) {
var self = this;
this.sentence = $('.sentence');
this.audio = audio;
this.play = play;
this.pause = pause;
this.havePaused = false;
this.startIndex = 0;
this.currentTime = 0;
this.escape = 50;
this.audio.load();
var link = window.location.href.replace(/play/i, 'play').split('play')[0] + 'Play';
if (window.location.search) {
link = link.split('?')[0];
}
//在音频/视频(audio/video)的播放位置(播放到x秒)发生改变时触发高亮效果
$(this.audio).bind('timeupdate', function() {
var time = self.audio.currentTime,
totalTime = self.audio.duration,
mTime = time * 1000,
percent = time / totalTime,
item = self.startIndex;
//if (item == transfered.length - 1) {//最后一句
if (mTime < transfered[1]) {
self.changeHighLight(0);
self.startIndex = 0;
// }
} else if (mTime > transfered[item + 1]) {//前进
self.changeHighLight(item + 1);
self.startIndex = item + 1;
}else if(mTime<=transfered[item-1]){//后退
self.changeHighLight(item - 1);
self.startIndex = item - 1;
}
});
//点击播放
this.play.bind('tap', function(e) {
self.playSound(e);
});
//点击暂停
this.pause.bind('tap', function(e) {
self.stopSound(e);
});
var barWidth=$('.boxprogress').width()-78;
$('.progress-bar').css('width',barWidth);
//~~~~~~~~~~~~~~~~~~~~~~~~~~~播放进度条 start~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const audios = document.getElementById('audio');
const start = document.querySelector('.start');
const end = document.querySelector('.end');
const progressBar = document.querySelector('.progress-bar');
const now = document.querySelector('.now');
var width = document.querySelector('.progress-bar').offsetWidth;
var x1,y1,olfLeft,newLeft,per;
if(audios.pause()){
$('.playPar').hide();
$('.pausePar').show();
}else{
$('.playPar').show();
$('.pausePar').hide();
}
function conversion (value) {
let minute = Math.floor(value / 60);
minute = minute.toString().length === 1 ? ('0' + minute) : minute;
let second = Math.round(value % 60)
second = second.toString().length === 1 ? ('0' + second) : second;
return `${minute}:${second}`;
}
//在视频的元数据加载后执行 onloadedmetadata
audios.onloadedmetadata = function () {
end.innerHTML = conversion(audios.duration);//ios 音频未播放前获取不到duration
start.innerHTML = conversion(audios.currentTime);
}
end.innerHTML = conversion(audioDuration);//所以时长从后台获取duration
$('.now').attr('data-attr',conversion(audios.currentTime)+'/'+conversion(audioDuration));
//点击播放条
progressBar.addEventListener('click', function (event) {
let coordStart = this.getBoundingClientRect().left;//元素左边距离页面左边的距离
let coordEnd = event.pageX;
let p = (coordEnd - coordStart) / this.offsetWidth;
now.style.width = p * 100 + '%';
audios.currentTime = p * audios.duration;
audios.play();
$('.playPar').hide();
$('.pausePar').show();
});
//拖拽跳转进度:监听 onTouchStart 、 onTouchMove 和 onTouchEnd
now.addEventListener("touchstart",handleStart,{ passive: false });
now.addEventListener("touchmove",handleMove,{ passive: false });
now.addEventListener("touchend",handleEnd,{ passive: false });
function handleStart(e){
e.preventDefault();
var touches = e.changedTouches;
x1 = touches[0].pageX;
y1 = touches[0].pageY;
olfLeft=x1;
}
function handleMove(e){
e.preventDefault();
var x2 = e.changedTouches[0].pageX;
var y2 = e.changedTouches[0].pageY;
newLeft = x2-x1;
nowLeft = olfLeft+newLeft;
if(nowLeft<0){
nowLeft = 0;
}
if(nowLeft>width){
nowLeft = width;
}
progressBar.style.width=nowLeft+"px";
per = nowLeft/width;
audios.currentTime = audios.duration*per;
now.style.width = audios.currentTime / audios.duration * 100 + '%';
}
function handleEnd(e){
now.removeEventListener("touchmove",handleEnd,false);
audios.currentTime =audios.duration*per;
}
setInterval(() => {
start.innerHTML = conversion(audios.currentTime);
$('.now').attr('data-attr',conversion(audios.currentTime)+'/'+conversion(audioDuration));
now.style.width = audios.currentTime / audios.duration * 100 + '%';
}, 1000);
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~播放进度条 end~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//播放结束,显示播放按钮
audios.addEventListener('ended', function () {
$('.playPar').show();
$('.pausePar').hide();
}, false);
//点击播放下一句
next.bind('tap', function(e) {
self.startIndex ++;
if(isNaN(transfered[0])){//木有时间戳
audios.currentTime += 10;//前进10秒
}
if(self.startIndex>=transfered.length){
self.startIndex = transfered.length-1;
}
self.playSound(e);
});
//点击播放上一句
pre.bind('tap', function(e) {
self.startIndex --;
if(isNaN(transfered[0])){//木有时间戳
audios.currentTime -= 10;//后退10秒
}
if(self.startIndex < 0){
self.startIndex = 0;
}
self.playSound(e);
});
//选择某一句播放
$('.sentence').click(function(e){
var startIndex = $(this).index('.sentence');
self.startIndex = startIndex;
self.playSound(e);
});
//跳转到高亮位置
position.bind('tap',function(e){
var $itemSen = $('.sentence').eq(self.startIndex);
var pageScorllHeight= $itemSen.offset()['top']-20;
document.body.scrollTop = document.documentElement.scrollTop =pageScorllHeight;
$('.positionSize').attr('src','https://static.eudic.net/web/ting/applets/applethighlight.png');
});
//倍速加点击效果
$(".liSpeed").on({
"touchstart": function () {
$(this).addClass("appletLibg");
},
"touchend": function () {
$(this).removeClass("appletLibg");
}
});
//切换倍速播放
$(".liSpeed").click(function(){
$('.playPar').hide();
$('.pausePar').show();
$(".liSpeed").removeClass(highlightCls);
$(this).addClass(highlightCls);
$("#speed img").attr('src','https://static.eudic.net/web/ting/applets/applet'+$(this).attr('data-speed')+'x.png');
$('.appletsControlUlSpeed').hide();
audios.playbackRate=$(this).attr('data-speed');
audios.play();
})
//显示隐藏倍速弹框
$("#speed").bind('tap',function(){
if($(".appletsControlUlSpeed").css("display")=="none"){
$('.appletsControlUlSpeed').show();
}else{
$('.appletsControlUlSpeed').hide();
}
});
$('.ac-item li').on({
"touchstart": function () {
$(this).addClass("appletLibgs");
},
"touchend": function () {
$(this).removeClass("appletLibgs");
}
});
//点击弹出模态框的相关操作
$('.appletsAppTipImg').click(function(){
document.cookie ="appletsName=applets;path=/";
$('.downloadAppTip').hide();
});
$('.appletsAppTip').click(function(){
$('.appletModalAppdowm').show();
});
$('.confirmCloseSpan').on({
"touchstart": function () {
$(this).addClass("appletColor");
},
"touchend": function () {
$(this).removeClass("appletColor");
}
});
$('.confirmClose').click(function(){
$('.appletModalAppdowm').hide();
})
$('.appletModalGrey').click(function(){
$('.appletModalAppdowm').hide();
})
};
//播放音频
AudioPlay.prototype.playSound = function(e) {
e.preventDefault();
if(this.havePaused){
this.havePaused = false;
}else{
if (transfered.length > this.startIndex) {
var time = transfered[this.startIndex];
if (!isNaN(time)) {
this.audio.currentTime = time/1000;
this.changeHighLight(this.startIndex);
}
}
}
$('.playPar').hide();
$('.pausePar').show();
this.audio.play();
};
//暂停播放
AudioPlay.prototype.stopSound = function(e) {
e.preventDefault();
this.havePaused = true;
$('.playPar').show();
$('.pausePar').hide();
this.audio.pause();
};
//高亮
AudioPlay.prototype.changeHighLight = function (index) {
var $item = $('.sentence').eq(index);
$('.sentence').removeClass(highlightCls);
$item.addClass(highlightCls);
if ($item.offset()['top'] + $item.height()-document.body.scrollTop +this.escape> $(window).height() || $item.offset()['top'] -document.body.scrollTop< 0) {
$('body').scrollTop($item.offset()['top']-20);
}
};
//初始化
function init(specialT) {
initSoundSegment();
initPage(specialT);
orderIndex = getOrder();
var audioPlay = new AudioPlay($('#audio')[0], $('#play'), $('#pause'), $('#next'), $('#pre'),$('#position'));
}
return {
'init': init
}
}());
以下是视频播放页面的完整代码:(html+js+css)
@using Eudic.Support
@{
Layout = null;
var lang = DictResource.GetText("lang");
}
<!doctype html>
<html>
<head>
<title>@ViewBag.name</title>
<meta charset="utf-8" />
<meta name="referrer" content="no-referrer" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="apple-itunes-app" content="app-id=@DictResource.GetText("AppStoreIDTing")"/>
<link href="~/Content/css/webting/play.css?20190704001" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../../content/css/webting/video.css?20190704001">
</head>
<body class="videPlayHtmlBody">
@Html.Partial("ShareArticle") //这行的意思就是引入上面的 ShareArticle.html文件中的代码
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/zepto.js"></script>
@* 解决点透 *@
<script src="//static.frdic.com/web/highchart/fastclick.js"></script>
<script>
//get url param
function getUrlParam(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
var r = window.location.search.substr(1).match(reg);
if (r !== null) {
return unescape(r[2]);
} else {
return null;
}
}
var audioDuration="@(ViewBag.duration)";
$(function () {
var translate = @Html.Raw(ViewBag.json);
if(translate['has_translation']){
(function(lrc){//lrc:sentence info
var orderIndex = -1, trans, order, text, transText;
for(var i=0, l=lrc.length; i<l; i++){//只显示1/3的内容
trans = lrc[i];
order = trans['order'];//第几句
order -= 1;
text = trans['text'];//译文
if(order != orderIndex){
if(orderIndex != -1){
transText += '</p>';
$(transText).insertAfter($('.paragraph').eq(order-1));
}
transText = '<p class="chinese"><span>' + text + '</span>';
}else{
transText += '<span>' + text + '</span>';
}
orderIndex = order;
}
transText += '</p>';
//添加译文
$(transText).insertAfter($('.paragraph').eq(order));
}(translate['translation']));
}
$("video.video").attr({ "webkit-playsinline": true, "playsinline": true})
//解决点透方法
FastClick.attach(document.body);
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
$(".subTitle").remove()
$(".subControl").remove()
$(".playControl").remove()
if (isiOS) {
$(".startPlay").remove()
$(".controls").remove()
$("video.video").attr("controls",true)
} else {
$(".startPlay").show()
$(".controls").show()
$(".controls").css("padding-left", "10px")
}
$(".content").find(".article").show()
var h = true,
h1 = true;
var timeList = [];
var timeRange = $('#J_CIKU_sentence_time_range').length>0 ? $('#J_CIKU_sentence_time_range').val().split(','):[];
for (var i = 0, l = timeRange.length; i < l; i++) {
var time = timeRange[i].split('.')[0].split(':'), s;
if (time.length == 3) {
s = time[0] * 3600 + time[1] * 60 + time[2] * 100 / 100;
} else if (time.length == 2) {
s = time[0] * 60 + time[1] * 100 / 100;
}
s += timeRange[i].split('.')[1] / 100;
s *= 1000;
timeList.push(s);
}
//句子高亮
function scrollChanged() {
if (h) return;
if ($(".high_light") != null && $(".high_light").length > 0) {
if ($(".high_light").offset().top + $(".high_light").height() > $(window).height() + $(window).scrollTop() - 50 || $(".high_light").offset().top < $(window).scrollTop() + $(".videoArea").height()) {
setTimeout(function () {
h = true;
h1 = false;
}, 200)
}
}
}
$(window).scroll(function () {
scrollChanged()
})
$(".article").bind("touchmove", function () {
h = false;
})
//设置新的标题
var newH1='<h1 class="newH1">'+$('.container>h1').text()+'</h1>';
$(newH1).insertAfter('.videoArea');
//没有下载app就跳应用宝
$(".liArticle,.seeMoreBtn").click(function () {
setTimeout(function () {
window.location.href="http://a.app.qq.com/o/simple.jsp?pkgname=com.eusoft.ting.@lang";
}, 2000)
})
//audio相关方法
var audioFnc=function (audio, play, pause, next, pre,position) {
var self = this;
this.audio = audio;
this.play=play;
this.pause = pause;
this.startIndex = 0;
this.currentTime = 0;
this.havePaused = false;
//拖动滚动条 高亮哪一句 苹果手机上面可以但是touched在安卓设备上不行
$(".video,.controls").bind('touchend', function () {
$(self.audio).unbind('timeupdate')
setTimeout(function () {
var time = self.audio.get(0).currentTime,
totalTime = self.audio.get(0).duration,
mTime = time * 1000;
var m;
if (mTime < timeList[0]) {
self.changeHighLight(0);
self.startIndex = 0;
} else {
for (var i in timeList) {
if (mTime < timeList[i]) {
m = i - 1 < 0 ? 0 : i - 1;
break;
} else if (mTime > timeList[timeList.length-1]) {
m = timeList.length - 1;
}
}
self.changeHighLight(m);
self.startIndex = m;
}
timeupdate()
}, 200)
})
//debug 移动端播放中句子不跟随高亮
var video = document.getElementsByTagName('video')[0];
video.addEventListener('timeupdate', function (e) {
var time = self.audio.get(0).currentTime,
totalTime = self.audio.get(0).duration,
mTime = time * 1000,
percent = time / totalTime,
item = self.startIndex;
//播放进行中高亮跟随
//if (item == transfered.length - 1) {//最后一句
if (mTime < timeList[1]) {
self.changeHighLight(0);
self.startIndex = 0;
// }
} else if (mTime > timeList[item + 1]) {//前进
self.changeHighLight(item + 1);
self.startIndex = item + 1;
}else if(mTime<=timeList[item-1]){//后退
self.changeHighLight(item - 1);
self.startIndex = item - 1;
}
})
//播放进度条 事件
timeupdate()
function timeupdate() {
$(this.audio).bind('timeupdate', function (e) {
var time = self.audio.get(0).currentTime,
totalTime = self.audio.get(0).duration,
mTime = time * 1000,
percent = time / totalTime,
item = self.startIndex;
//播放进行中高亮跟随
if (item == timeList.length - 1) {
if (mTime < timeList[1]) {
self.changeHighLight(0);
self.startIndex = 0;
}
} else if (mTime > timeList[item + 1]) {
self.changeHighLight(item + 1);
self.startIndex = item + 1;
}
})
}
//播放结束
$(this.audio).bind('ended', function (e) {
$("html,body", window.parent.document).animate({
scrollTop: 0
}, 500)
self.startIndex = 0;
$('.sentence').removeClass("high_light");
})
$(this.audio).bind('play', function (e) {
self.changeHighLight(self.startIndex);
})
this.play.bind('tap', function (e) {
self.playSound(e);
});
this.pause.bind('tap', function (e) {
self.stopSound(e);
});
next.bind('tap', function (e) {
self.havePaused = false;
self.startIndex++;
if (self.startIndex >= timeList.length) {
self.startIndex = timeList.length - 1;
}
self.playSound(e);
});
pre.bind('tap', function (e) {
self.havePaused = false;
self.startIndex--;
if (self.startIndex < 0) {
self.startIndex = 0;
}
self.playSound(e);
});
$('.sentence').click(function (e) {
self.havePaused = false;
var startIndex = $(this).index('.sentence');
self.startIndex = startIndex;
var o = $(".paragraph").eq(startIndex);
self.playSound(e);
});
//跳转到高亮位置
position.bind('tap',function(e){
var $itemSen = $('.sentence').eq(self.startIndex);
if (/(Android)/i.test(navigator.userAgent)){
var pageScorllHeight= $itemSen.offset()['top']-20;
document.body.scrollTop = document.documentElement.scrollTop =pageScorllHeight;
}else{
$("body,html").animate({ scrollTop: $(window).scrollTop() -10+ ($itemSen.offset().top - $(window).scrollTop() - $(".video").height()) }, "normal")
}
$('.positionSize').attr('src','https://static.eudic.net/web/ting/applets/applethighlight.png');
});
// 监听音频播放/暂停
var audios=document.getElementsByTagName("video")[0];
audios.addEventListener('play',function(){
$('.playPar').hide();
$('.pausePar').show();
});
audios.addEventListener('pause',function(){
$('.playPar').show();
$('.pausePar').hide();
})
//~~~~~~~~~~~~~~~ new control menu start ~~~~~~~~~~~~~~~~~~
var highlightCls = 'high_light';
var barWidth=$('.boxprogress').width()-78;
$('.progress-bar').css('width',barWidth);
//播放进度条 start
// const audios = document.getElementById('audio');//替换成 myVideo
const start = document.querySelector('.start');
const end = document.querySelector('.end');
const progressBar = document.querySelector('.progress-bar');
const now = document.querySelector('.now');
var width = document.querySelector('.progress-bar').offsetWidth;
var x1,y1,olfLeft,newLeft,per;
function conversion (value) {
let minute = Math.floor(value / 60);
minute = minute.toString().length === 1 ? ('0' + minute) : minute;
let second = Math.round(value % 60)
second = second.toString().length === 1 ? ('0' + second) : second;
return `${minute}:${second}`;
}
//点击播放条
progressBar.addEventListener('click', function (event) {
let coordStart = this.getBoundingClientRect().left;//元素左边距离页面左边的距离
let coordEnd = event.pageX;
let p = (coordEnd - coordStart) / this.offsetWidth;
now.style.width = p * 100 + '%';
audios.currentTime = p * audios.duration;
audios.play();
$('.playPar').hide();
$('.pausePar').show();
});
//拖拽跳转进度:监听 onTouchStart 、 onTouchMove 和 onTouchEnd
now.addEventListener("touchstart",handleStart,{ passive: false });
now.addEventListener("touchmove",handleMove,{ passive: false });
now.addEventListener("touchend",handleEnd,{ passive: false });
function handleStart(e){
e.preventDefault();
var touches = e.changedTouches;
x1 = touches[0].pageX;
y1 = touches[0].pageY;
olfLeft=x1;
}
function handleMove(e){
e.preventDefault();
var x2 = e.changedTouches[0].pageX;
var y2 = e.changedTouches[0].pageY;
newLeft = x2-x1;
nowLeft = olfLeft+newLeft;
if(nowLeft<0){
nowLeft = 0;
}
if(nowLeft>width){
nowLeft = width;
}
progressBar.style.width=nowLeft+"px";
per = nowLeft/width;
audios.currentTime = audios.duration*per;
now.style.width = audios.currentTime / audios.duration * 100 + '%';
}
function handleEnd(e){
now.removeEventListener("touchmove",handleEnd,false);
audios.currentTime =audios.duration*per;
}
setInterval(() => {
start.innerHTML = conversion(audios.currentTime);
$('.now').attr('data-attr',conversion(audios.currentTime)+'/'+conversion(audioDuration));
now.style.width = audios.currentTime / audios.duration * 100 + '%';
}, 1000);
//倍速加点击效果
$(".liSpeed").on({
"touchstart": function () {
$(this).addClass("appletLibg");
},
"touchend": function () {
$(this).removeClass("appletLibg");
}
});
//切换倍速播放
$(".liSpeed").click(function(){
$('.playPar').hide();
$('.pausePar').show();
$(".liSpeed").removeClass(highlightCls);
$(this).addClass(highlightCls);
$("#speed img").attr('src','https://static.eudic.net/web/ting/applets/applet'+$(this).attr('data-speed')+'x.png');
$('.appletsControlUlSpeed').hide();
audios.playbackRate=$(this).attr('data-speed');
audios.play();
})
//显示隐藏倍速弹框
$("#speed").bind('tap',function(){
if($(".appletsControlUlSpeed").css("display")=="none"){
$('.appletsControlUlSpeed').show();
}else{
$('.appletsControlUlSpeed').hide();
}
});
$('.ac-item li').on({
"touchstart": function () {
$(this).addClass("appletLibgs");
},
"touchend": function () {
$(this).removeClass("appletLibgs");
}
});
//~~~~~~~~~ new control menu end~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
audioFnc.prototype.playSound = function (e) {
h = true;
e.preventDefault();
if (this.havePaused) {
this.havePaused = false;
} else {
if (timeList.length > this.startIndex) {
var time = timeList[this.startIndex];
if (!isNaN(time)) {
this.audio.get(0).currentTime = time / 1000;
this.changeHighLight(this.startIndex);
}
}
}
$('.playPar').hide();
$('.pausePar').show();
this.audio.get(0).play();
};
audioFnc.prototype.stopSound = function (e) {
e.preventDefault();
this.havePaused = true;
$('.playPar').show();
$('.pausePar').hide();
this.audio.get(0).pause();
};
audioFnc.prototype.changeHighLight = function (index) {
var $item = $('.sentence').eq(index);
$('.sentence').removeClass("high_light");
$item.addClass("high_light");
//自动跟随高亮代码
if (h1) {
if ($item.offset().top + $item.height() > $(window).height() + $(window).scrollTop() - 50 || $item.offset().top < $(window).scrollTop() + $(".videoArea").height()) {
$("body,html").animate({ scrollTop: $(window).scrollTop() -10+ ($item.offset().top - $(window).scrollTop() - $(".video").height()) }, "normal")
}
}
};
var audioFnc = new audioFnc($('.videoWrap').find('video'), $('#play'), $('#pause'), $('#next'), $('#pre'),$('#position'));
//右上角打开唤起app
function getParam(n) {
var i = new RegExp("(^|&)" + n + "=([^&]*)(&|$)")
, t = window.location.search.substr(1).match(i);
return t != null ? unescape(t[2]) : null
}
$(".download").find("a").click(function () {
setTimeout(function () {
window.location.href=$("#soft a").attr("href")
}, 2000)
})
})
window.onload=function(){
if(getUrlParam('from_page')==='jt'){
$('.videoPlayDown,.seeMoreImg,.pullMoreCon,.seeMoreBtn,.articleTit,.articlCon,.bottmDownload').hide();
$('.revisedVideoPlay').addClass('iphoneXStyle');
}else{
// 设置文章图片的高度
var imgArticlesW=$(".imgArticle img").width();
$(".imgArticle img").css('height',imgArticlesW/2);
var videoH=$('.videoArea').height();
//设置内容高度
var allConHeight=$(".content").height();
if (/(Android)/i.test(navigator.userAgent)){
var heightCon=allConHeight;
}else{
var heightCon=allConHeight>800?allConHeight-videoH:allConHeight;
}
$(".content").css({'height':allConHeight>800?800:allConHeight,'overflow':'hidden'});
$('.pullMoreCon').click(function(){
$(".content").css({'height':heightCon+3,'overflow':'hidden'});
$('.hideMoreCon').show();
$('.seeMoreImg').hide();
$(this).hide();
})
}
// ios video滚动置顶
if (!/(Android)/i.test(navigator.userAgent)){
if ($(".videoArea").length > 0) {
var menuTop = document.querySelector('.videoArea').offsetTop;
}
var scTop = 0;
$(document).scroll(function () {
scTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scTop >= menuTop) {
$(".videoArea").addClass("fixDiv");
} else {
$(".videoArea").removeClass("fixDiv");
}
})
}
}
//按钮添加阴影
$('.seeMoreBtn').on({
"touchstart": function () {
$(this).find(".btnGreyBg").show();
},
"touchend": function () {
$(this).find(".btnGreyBg").hide();
}
})
</script>
@Html.Partial("WeixinShare")
</body>
play.css文件:
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.2;
min-width: 270px;
margin: 0;
padding: 0 10px;
}
img {
max-width: 100%;
}
ul {margin: 0;padding-left: 0;list-style: none;}
dl, dd{margin:0;}
a {
text-decoration: none;
line-height: 0;
color:inherit;
}
.container {
width: 100%;
}
.headerBar {
font-family: '微软雅黑', '黑体', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color:#fff;
background-color:#209AD1;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #8CCCE3;
margin:-10px -10px 0 -10px;
padding:0 10px;
}
.headerBar h2 {
margin: 0;
font-weight: normal;
display: inline-block;
margin-top: 9px;
height: 32px;
font-size: 16px;
line-height: 32px;
padding-left: 40px;
background: url('/Images/webting/playBack.jpg') -368px -160px no-repeat;
}
h1, p, h3{margin-top:0; margin-bottom:0;}
.headerBar p{text-align: right; margin-top:-42px; cursor: pointer; font-size: 16px; height: 32px; line-height: 32px;}
.high_light{color:#4B63FF !important;}
.audio {
display: none;
}
.audioControl {
height: 49px;
border-top:1px solid #D9D9D9;
background-color:#fff;
position: fixed;
bottom: 0;
width: 100%;
margin: 0 -10px;
z-index:999;
}
.ac-item {
width: 270px;
height: 50px;
margin: 0 auto;
overflow: hidden;
}
.ac-item li, .ac-item li a {
height: 50px;
width: 50px;
text-align: center;
display: inline-block;
margin: 0 15px;
}
.ac-item li a {
background: url('/Images/webting/playControl.jpg') 0 0 no-repeat;
}
.spmobiletitle{margin:10px 0;}
#play {background-position: 0 0;}
#pause {background-position: -50px 0;}
#next {background-position: -100px 0;}
#pre{background-position: -150px 0;}
.site{text-align: right; color:#9F9F9F; border-bottom:1px dotted #9f9f9f; padding-bottom:10px; margin-top:10px;}
#soft{/*margin-bottom:90px;*/font-family: '微软雅黑', '黑体', 'Helvetica Neue', Helvetica, Arial, sans-serif;}
.software{margin-bottom:20px;}
#soft, .software{border-top:1px dotted #9f9f9f; margin-top:1px;}
.software{font-weight: bold;display:block;height:74px;position: relative;background:#fff;padding-left:10px;margin-top:20px;border-top:0;}
.title{margin-left:60px; font-size: 16px; color:#209AD1;height:20px;line-height: 20px;margin-top:12px;padding-top:12px;}
.pic{position: absolute;top:12px;}
.pic img{width:50px; height:50;}
.exp{margin-left:60px; margin-top:12px;height:16px;line-height:16px;
color:#8a8a8a;font-weight: 500;}
.down{margin-left:12px; }
.down li{background:url('/Images/webting/playBack.jpg') -383px -200px no-repeat; padding-left:25px; line-height: 1; color:#434343;
margin-bottom:1.5em;}
.chinese{text-indent: 1em;}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
.ac-item li a {
background: url('/Images/webting/playControl@2x.jpg') 0 0 no-repeat;
background-size:200px 50px;
}
.headerBar h2 {
background: url('/Images/webting/playBack@2.jpg') 0 -160px no-repeat;
background-size: 200px 300px;
}
.down li{
background:url('/Images/webting/playBack@2.jpg') -183px -215px no-repeat;
background-size:200px 300px;
}
}
.crcode{
display:block;
position: relative;
top:10px;
}
.downloadurl{
display:block;
}
.topline{
border-bottom: 1px dotted #9f9f9f;
margin-top: 1px ;
margin-bottom:1px;
}
.download_icon{
width:50px;
height:40px;
position: absolute;
right:15px;
top:50%;
margin-top:-20px;
font-size:10px;
color:#35bc72;
text-align: center;
}
.download_icon p{
padding-top:4px;
}
.download_icon img{
display: block;margin:0 auto;
width:23px;height:21px;
}
.title_en{
color:#33A0E8 !important;
}
.title_de{
color:#42AC27 !important;
}
.title_fr{
color:#209AD1 !important;
}
.title_es{
color:#D13A31 !important;
}
/*iphoneX兼容*/
.AdaptationIphoneX {
display: none;
z-index: 99;
height: 34px;
width: 100%;
position: fixed;
bottom: 0;
background: #000;
margin: 0 -15px;
}
.playIphoneX{
margin:0 !important;
}
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
.audioControl {
bottom:34px;
}
.AdaptationIphoneX {
display: block !important;
}
.appletsControlUlSpeed,.downloadAppTip{
bottom:124px !important;
}
.appletModalContent{
top:-34px !important;
}
.bottmDownload{
margin-bottom: 131px !important;
}
.iphoneXStyle{
padding-bottom: 110px !important;
}
}
/* 小程序阅读页面 start*/
.appletsControl .ac-item{
width:100% !important;
display: flex;
}
.appletsControl .ac-item li,.appletsControl .ac-item li a{
font-size: 16px;
height:45px;
}
.appletsContainer #article>h1{
padding-top:10px;
}
.appletsContainer #article h1 .sentence{
font-size: 20px;
color: #333;
}
.appletsContainer .img-border{
box-shadow: none !important;
margin-bottom: 12px !important;
}
.appletsContainer .img-border img{
border-radius: 5px !important;
height:168px !important;
}
.appletsContainer #article p.paragraph{
line-height: 1.6;
}
.appletsControl li a{
background: none;
display: flex;
align-items: center;
}
.appletsControl li a img{
width:24px;
height:24px;
}
.appletsContainer #article section{
text-align: left !important;
padding:0 !important;
}
.appletsControlUlSpeed{
display: none;
position: fixed;
z-index: 999;
width: 80px;
height: 300px;
bottom: 90px;
background: #fff;
border-radius: 5px;
box-shadow: 1px 14px 24px #ccc;
}
.appletsControlUlSpeed .liSpeed{
font-size: 14px;
width: 100%;
height: 12.5%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.appletLibg{
background: #ccc;
}
.appletsControl{
border-top:none;
height:90px !important;
box-shadow: 0px 4px 20px rgba(0, 0, 0, .14);
}
.appletsControlUl option:hover{
color:#333 !important;
background-color:#ccc !important;
}
.appletsControl #speed span{
font-size: 18px;
font-weight: bold;
display: flex;
align-items: center;
width: 100%;
height: 100%;
}
.appletsControl #speed {
display: flex;
align-items: center;
}
.appletsControl .ac-item{
height:45px;
position: absolute;
bottom:0;
}
.appletsControl .ac-item .pausePar{display:none;}
.appletsNewSize{
width:28px !important;
height:28px !important;
}
.appletsControl{
margin: 0 -20px !important;
}
/* 播放条 */
.appletsProgress {
margin: 14px auto;
padding: 0 20px;
margin-top:26px;
}
.appletsProgress .progress-bar {
position: relative;
height: 2px;
background-color: #E7EFFE;
vertical-align: 2px;
border-radius: 3px;
cursor: pointer;
}
.boxprogress{
position: relative;
width:100% !important;
height: 2px;
background-color: #E7EFFE;
vertical-align: 2px;
border-radius: 3px;
cursor: pointer;
}
.appletsProgress .now {
position: absolute;
left: 0;
display: inline-block;
height: 2px;
background: #4B63FF;
}
.appletsProgress .now::after {
/* content: attr(data-attr);
position: absolute;
bottom:-7px;
left: 100%;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #4B63FF; */
content: attr(data-attr);
position: absolute;
bottom: -7px;
left: 100%;
width: 85px;
height: 19px;
border-radius: 30px;
color: #fff;
background-color: #4B63FF;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.bigClass::after{
width:36px;
height:36px;
bottom:-8px;
background-color: #4B63FF;
}
.startEndNum{
width:100% !important;
}
.startEndNum{
display: flex;
margin-top:10px;
font-size:10px;
}
.startEndNum .start{
flex:1;
}
.appletLibgs{
background: #F2F2F2;
}
.appletsControl .ac-item li,.appletsControl .ac-item li a{
flex:1;
display: flex;
justify-content: center;
width:auto;
margin:0;
}
.appletsControl .ac-item li a img{
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-user-select:none;
-o-user-select:none;
user-select:none;
}
.downloadAppTip{
display: flex;
margin: 0 -20px !important;
width: 100%;
position: fixed;
z-index: 999;
bottom: 90px;
height:44px;
background: url('https://static.eudic.net/web/ting/applets/tips_img.png') no-repeat;
background-size: 100% 100%;
background-position: 0px center;
}
.appletsAppTip{
flex: 1;
font-size: 16px;
margin-left: 20px;
display: flex;
align-items: center;
color: #4B63FF;
}
.appletsAppTipImg{
display: flex;
align-items: center;
width: 52px;
justify-content: center;
}
.appletsAppTipImg img{
display: flex;
align-items: center;
width:12px;
height:12px;
}
/* 模态框 */
.appletModalAppdowm{
margin:auto;
min-height: 100%;
width: 100%;
position: fixed;
z-index: 999998;
bottom:0;
left:0;
display: none;
justify-content: center;
align-items: center;
}
.appletModalGrey{
background: rgba(0, 0, 0, 0.25);
margin:auto;
min-height: 100%;
width: 100%;
position: fixed;
z-index: 999;
bottom:0;
left:0;
}
.appletModalContent{
width:311px;
height:405px;
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
z-index: 999;
background: #fff;
border-radius: 10px;
margin:auto;
}
.appletModalAppdowm{
text-align: center;
}
.modalTipImg{
width:254px;
height:170px;
margin: 0 auto;
margin-top:20px;
}
.modalFontTit{
font-size: 18px;
color: #444444;
font-weight: bold;
margin: 36px 0 24px 0;
}
.modalMinTit{
padding: 0 29px;
font-size: 14px;
color: #9C9C9C;
line-height: 1.4;
}
.confirmClose{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position:absolute;
bottom:0;
height:50px;
border-top:1px solid #EEEFF3;
}
.confirmCloseSpan{
font-size: 17px;
color: #4EA7FE;
}
.appletsContainer .site{
border-bottom:none;
}
.appletsContainer{
margin-bottom: 110px;
}
.appletsContainer .mume h1{
margin-top:0 !important;
}
.appletColor{
color:#ccc !important;
}
.appletsContainer #article p.paragraph{
text-align: left !important;
}
.bignow{
top: -20px;
left:-14px;
width: 40px;
height: 40px;
background:rgba(0,0,0,0.2);
position: absolute;
}
body#appletsBody {
color: #333;
background: #fff;
padding: 0px 20px 0 20px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#appletsBody .headerBar {
display:none;
margin: -10px -15px 0 -15px;
}
#appletsBody #article {
-webkit-tap-highlight-color: rgba(0,0,0,0)
}
#appletsBody #article h1 {
font-family: Helvetica, sans-serif;
font-weight: 600;
padding-bottom: 20px;
}
#appletsBody #article p.paragraph {
text-indent: 0;
margin: 1.3em auto 0.3em auto;
}
#appletsBody #article p.paragraph .sentence {
font-size: 18px;
}
#appletsBody .audioControl {
margin: 0 -15px;
}
#appletsBody #article .chinese {
font-size: 16px;
}
#appletsBody #article .chinese {
text-indent: 0px;
}
#appletsBody #appleLottie{
width:100%;
height:50px;
}
#appletsBody .AdaptationIphoneX{
margin:0 -20px;
}
#appletsBody #speed{
width:100%;
height:100%;
}
/* 小程序阅读页面 end*/
/* 改版 videoplay 页面 start */
body.playHtmlBody{
background: #fff;
padding: 0;
margin:0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-family: PingFangSC-Regular,-apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
body.playHtmlBody #article {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body.playHtmlBody #article h1 {
font-family: Helvetica, sans-serif;
font-weight: 600;
padding-bottom: 20px;
}
body.videPlayHtmlBody{
font-family: PingFangSC-Regular,-apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding:0;
background: #fff;
-webkit-user-select: text !important;
user-select: text !important;
}
.videoPlayDown{
padding: 10px 0;
border-bottom: 1px solid #F2F2F2;
}
.videoPlayDown .title{
color:#333;
margin-top: 0;
padding-top: 0;
font-weight: normal;
}
.videoPlayDown .exp{
font-size: 12px;
color: #999999;
margin-top: 5px;
}
.videoPlayDown .title,.videoPlayDown .exp{
margin-left: 54px;
}
.videoPlayDown .download_icon{
width: 60px;
height: 28px;
border: 2px solid rgba(49,149,252,0.50);
border-radius: 15px;
right:20px;
box-sizing: border-box;
margin-top:-14px;
}
.videoPlayDown .download_icon p{
height:22px;
line-height:18px;
font-size: 14px;
color: #3195FC;
font-weight: normal;
}
.videoPlayDown .pic{
top:0;
}
.videoPlayDown .pic img{
width: 40px;
height: 40px;
}
.videoPlayDown .software{
height:auto;
padding-left:20px;
margin:0;
}
.revisedVideoPlay{
padding: 0 20px;
width: auto;
}
.revisedVideoPlay video{
border-radius: 5px;
}
.revisedVideoPlay .seeMoreBtn{
position: relative;
height: 40px;
width: 100%;
margin-bottom: 50px;
margin-top: 35px;
}
.revisedVideoPlay .seeMoreBtn a{
height: 100%;
width: 100%;
background: #3195FC;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
color: #FFFFFF;
}
.revisedVideoPlay .articleTit{
margin:20px 0;
}
.revisedVideoPlay .titLine{
display: inline-block;
width:3px;
height:16px;
margin-right: 8px;
background: #3195FC;
border-radius: 2px;
vertical-align: bottom;
position: relative;
top: -1px;
}
.revisedVideoPlay .titCon{
font-size: 15px;
color: #333333;
}
.revisedVideoPlay .imgArticle img{
border-radius: 5px;
width:100%;
object-fit: cover;
/* height:80px; */
}
/* 平板 */
@media all and (min-width:550px) {
.revisedVideoPlay .fixDiv{
width: 100% !important;
padding: 0 !important;
}
}
.revisedVideoPlay .descArticle{
font-size: 15px;
color: #333333;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 20px;
}
.revisedVideoPlay .articlCon ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.revisedVideoPlay .liArticle {
/* flex: 1; */
display: inline-block;
width: 48%;
box-sizing: border-box;
list-style-type: none;
margin-bottom: 30px;
}
.revisedVideoPlay .liArticle:nth-child(odd){
margin-right:1%;
}
.revisedVideoPlay .liArticle:nth-child(even){
margin-left:1%;
}
.revisedVideoPlay .imgArticle{
margin-bottom: 5px;
}
.bottmDownload{
margin:20px 0 90px 0;
text-align: center;
}
.bottmDownload .logo img{
width:60px;
height:60px;
}
.bottmDownload .name{
font-size: 16px;
color: #333333;
font-weight: bold;
margin-top:18px;
}
.bottmDownload .desc{
font-size: 12px;
color: #7F7F7F;
margin:4px 0 20px 0;
}
.bottmDownload .downhref,.bottmDownload .down{
display: flex;
align-items: center;
justify-content: center;
width:90px;
height:32px;
border-radius: 16px;
font-size: 14px;
color: #3195FC;
margin: 0 auto;
font-weight: bold;
}
.bottmDownload .down{
border: 2px solid rgba(54,150,253,0.50);
box-sizing: border-box;
}
.videoPlayControl .ac-item{
width:auto;
height:47px;
display: flex;
padding:0 50px;
}
.videoPlayControl .ac-item li,.videoPlayControl .ac-item li a{
flex:1;
display: flex;
justify-content: center;
font-size: 16px;
height:47px;
}
.videoPlayControl .ac-item .pausePar,.videoPlayControl .ac-item .pausePar a{
width:auto;
display: flex;
justify-content: center;
}
.videoPlayControl li a{
background: none;
display: flex;
align-items: center;
}
.videoPlayControl li a img{
width:24px;
height:24px;
}
.videoPlayControl{
border-top:none;
margin: 0 !important;
box-shadow: 0px 4px 20px rgba(0, 0, 0, .14);
}
.videoPlayControl .ac-item .pausePar{display:none;}
.revisedVideoPlay .seeMoreImg{
position: absolute;
}
.revisedVideoPlay .seeMoreImg img{
position: relative;
bottom: 90px;
}
.revisedVideoPlay .article .paragraph,.revisedVideoPlay #article .paragraph,.revisedVideoPlay #article p.paragraph .sentence{
font-size: 17px;
color: #333333;
}
.revisedVideoPlay .article .chinese,.revisedVideoPlay #article .chinese{
font-size: 15px;
color: #7F7F7F;
}
.revisedVideoPlay h1 .sentence{
font-size: 20px;
color: #333333;
}
.revisedVideoPlay .list-paddingleft-2{
font-size: 15px;
}
.revisedVideoPlay.container>h1 {
font-size: 20px;
color: #333333;
display: none !important;
}
.seeMoreBtn .btnGreyBg{
display: none;
width: 100%;
position: absolute;
bottom: 0px;
background: rgba(0,0,0,0.15);
height: 40px;
border-radius: 5px;
}
.revisedVideoPlay .controls{
top: auto !important;
bottom:0;
display: none !important;
}
.revisedVideoPlay .newH1{
margin: 10px 0;
}
.revisedVideoPlay .pullMoreCon,.revisedVideoPlay .hideMoreCon{
position: absolute;
left: 50%;
margin-left: -15px;
z-index: 99;
}
.revisedVideoPlay .pullMoreCon img{
width: 30px;
height: 30px;
position: relative;
top: -10px;
}
.revisedVideoPlay .hideMoreCon img{
width: 30px;
height: 30px;
}
/*小箭头上下移动*/
@keyframes guide_icon {
0% {
transform: translateY(0);
}
25% {
transform: translateY(3px);
}
50% {
transform: translateY(6px);
}
75% {
transform: translateY(3px);
}
100% {
transform: translateY(0);
}
}
.revisedVideoPlay .pullMoreCon,.revisedVideoPlay .hideMoreCon{
-webkit-animation: guide_icon 1s linear infinite;
animation: guide_icon 1s linear infinite;
}
.revisedVideoPlay .hideMoreCon{
display: none;
}
/*引用第三方字体*/
@font-face {
font-family: RobotoSlab;
src: url('./RobotoSlab-Regular.ttf') format('truetype');
}
#topContent p,.paragraph {
font-family: RobotoSlab !important;
}
.revisedVideoPlay .fixDiv {
position: fixed;
width: auto;
z-index: 999;
margin-top: 0;
padding: 0 20px;
top: 0;
right: 0;
left: 0;
margin: auto;
}
.revisedVideoPlay .description p{
font-size: 15px;
}
.revisedVideoPlay .article{
margin-top:-10px;
}
.revisedVideoPlay .article .paragraph{
margin: 15px 0 6px 0;
}
.videoPlayControl #pre img,.videoPlayControl #next img{
width:22px;
height:22px;
}
.videoPlayControl #pre img,.videoPlayControl #next img{
width:22px;
height:22px;
}
.videoPlayControl #play img,.videoPlayControl #pause img{
width:26px;
height:26px;
}
.revisedVideoPlay .artical-info .copyright{
display:none;
}
.revisedVideoPlay .description section{
padding-bottom: 10px;
}
.revisedVideoPlay #article p.paragraph,.revisedVideoPlay #article p.chinese{
text-indent: inherit;
}
.revisedVideoPlay #article p.paragraph{
margin:20px 0 6px 0;
}
.revisedVideoPlay #article h1{
font-weight: bold;
}
.playControlMenu{
margin:0 !important;
left:0;
}
.iphoneXStyle{
padding-bottom: 80px;
}
body.videPlayHtmlBody .container>h1{
padding-top:25px;
padding-bottom:20px;
}
body.videPlayHtmlBody h1 {
font-family: Helvetica, sans-serif;
font-weight: 600;
}
body.videPlayHtmlBody .article .paragraph {
line-height: 1.5;
margin: 15px 0;
text-align: left;
font-size: 18px;
color: #585B6E;
}
body.videPlayHtmlBody .article {
position: relative;
z-index: 0;
display: block;
}
body.videPlayHtmlBody .audioControl {
margin: 0 -15px;
}
body.videPlayHtmlBody .high_light {
color:#0066ff;
}
body.videPlayHtmlBody w{
padding:0;
}
body.videPlayHtmlBody .chinese {
text-indent: 0px !important;
font-size: 18px;
line-height: 1.5;
color: rgb(160,160,160);
}
body.videPlayHtmlBody table {
border-collapse: collapse;
}
body.videPlayHtmlBody table, tr, td {
border: 1px solid #999;
}
body.videPlayHtmlBody .revisedVideoPlay{
margin-top:20px;
}
/* 改版 videoplay 页面 end */
.markdown-body .markdown-body {
padding: 0px !important;
}
参考链接js实现手机端音频进度条拖拽