javascript 自定义 音频/视频 播放控制器

效果：（视频和音频，看起来一样，只是代码有些小区别）

播放条实现：
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实现手机端音频进度条拖拽