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

播放条实现：
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}`;}//在视频的元数据加载后执行  onloadedmetadataaudios.onloadedmetadata = function () {end.innerHTML = conversion(audios.duration);//ios 音频未播放前获取不到durationstart.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 和 onTouchEndnow.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 paramfunction 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 infovar 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');//替换成 myVideoconst 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 和 onTouchEndnow.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'));//右上角打开唤起appfunction 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实现手机端音频进度条拖拽

javascript 自定义 音频/视频 播放控制器相关推荐

1. android语音播放工具类,Android开发之MediaPlayer多媒体(音频,视频)播放工具类

   本文实例讲述了Android开发之MediaPlayer多媒体(音频,视频)播放工具类.分享给大家供大家参考,具体如下: package com.android.imooc.chat; import ...

2. html音频自动播放隐藏控制器,HTML5 音频回放/播放控制器

   JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var sound = new Audio('http://media.soundcloud.com/str ...

3. PowerPoint ppt 触发器 自定义动画 视频 音频 播放 停止

   PowerPoint ppt 触发器 自定义动画 视频 音频 播放 停止 ppt 中添加视频或者音频后,总是希望可以自由控制播放,然后配合讲解,实现较好的演示效果 那么这需要用到触发器(直接用播放控件 ...

4. HTML5 音频 视频的使用以及自定义播放器

   一.音频 audio:音频 src:播放的音频文件的路径 controls:音频播放器的控制面板 autoplay:自动播放 loop:循环 <audio src="../mp3/xx ...

5. html5中加入音频,在H5场景中插入自定义音频和视频（任意画面）

   原标题:在H5场景中插入自定义音频和视频(任意画面) 本文由Zoomla!逐浪CMS官方发行,提升每一个开发者技能,并提供丰富的帮助信息. 在动力场景中,可以自由引用全场背景音乐. 但是,在一些特殊场 ...

6. 自定义音频播放器_创建自定义HTML5音频播放器

   自定义音频播放器 在本教程中,我将向您介绍HTML5音频,并向您展示如何创建自己的播放器. 如果您想走捷径,请查看Envato市场上可用的现成的HTML5音频播放器 . 它使您可以从各种来源创建播放列 ...

7. asp.net播放mp3,wma, avi音频视频

   前台: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx ...

8. html5视频播放怎么结束,html5设置或返回音频/视频是否应该在结束时再次播放的属性loop...

   实例 将视频设置为循环播放:myVid=document.getElementById("video1");myVid.loop=true; 定义和用法 loop 属性设置或返回音 ...

9. canvas+howler.js 解决同页面视频、音频同时播放问题

   canvas+howler.js 解决同页面视频.音频同时播放问题 参考文章: (1)canvas+howler.js 解决同页面视频.音频同时播放问题 (2)https://www.cnblogs. ...

最新文章

1. Go基础知识学习(6) 接口
2. SOFAMosn配置模型
3. python编程题-python编程练习题
4. Postfix+dovecot+extmail+sasl+mysql源码安装手册
5. c语言字符串逆置,字符串逆置
6. ETL异构数据源Datax_Oracle同步MySQL(全量)_04
7. 7. memcache 细节
8. Python绘制简单漂亮好玩的散点图
9. Rust 程序语言资料
10. 启动root用户 银河麒麟_银河麒麟桌面版系统-用户密码到期无法正常进入系统解决办法...
11. 怎么清理服务器数据库日志文件,SQL SERVER 数据库日志清理图文教程
12. 光有想法怎么开技术公司？
13. 2006年最热门的职业
14. 多传感器融合的SLAM综述
15. 5款靠谱的安卓备份应用
16. clang: warning: argument unused during compilation: ‘-no-pie‘ [-Wunused-command-line-argument]
17. 算法是怎样一步步毁掉年轻人的世界的
18. private static final long serialVersionUID = 1L 干什么的？
19. 系统架构设计师-软件开发模型（瀑布模型）
20. Spark物理计划和CBO和AQE

热门文章

1. 两台计算机组成一个局域网的方法,两台电脑如何建立局域网
2. 堆内存、栈内存、方法区
3. location.href不跳转、不执行的最有效的解决办法！
4. VCA821,VCA824做程控放大器使用总结
5. 8255和8253的综合应用
6. 那些年我用过的实用/学习/工具网站
7. 关于利用RD client远程电脑，和输入法的一些问题
8. 美国CFTC主席：区块链能够帮助监管机构更好地应对2008年经济危机
9. kalilinux破解WiFi密码（仅供学习使用）
10. banq 为什么大部分NoSQL不提供分布式事务？