设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Java语言交流 › 1个html-java播放器能显示字幕，同一页2个以上，就只有1 ...
返回列表 发新帖
查看: 873|回复: 2

[已解决]1个html-java播放器能显示字幕，同一页2个以上，就只有1个显示字幕。哪有问题呢？

[复制链接]
blackantt
发表于 2023-2-18 11:06:56 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
本帖最后由 blackantt 于 2023-2-18 11:10 编辑
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <title>Pinyin story</title>
  5. <meta name="keywords" content="">
  6. <meta name="description" content="">
  7. <meta name="applicable-device" content="pc">
  8. <meta http-equiv="Cache-Control" content="no-transform">

  10. <link rel="stylesheet" type="text/css" href="a1.css">
  11. </head>
  12. <body style="padding: 0px;">

  14. <p>----------------------------------------------------------------------------                          1            ---------------------------------</p>

  16. <div id="html5"><h2>You Browser </h2></div>
  17. <audio id="audio"  preload="auto" controls  style="display:block;margin:auto; text-align: center">
  18. <source src="test1.mp3" type="audio/mpeg">
  19. <track id="trk" kind="subtitles" srclang="en" src="test1.vtt" default  />
  20. </audio>

  22. <br/><div id="lyrics"></div><br/>
  23. <script type="text/javascript">
  24. //<![CDATA[

  26. var lyrics = document.getElementById('lyrics');
  27. var audio = document.getElementById('audio');
  28. var track = document.getElementById('trk');
  29. var textTrack = track.track;
  30. //track.addEventListener("cuechange", cueChange, false);   // oncuechange
  31. var nIntervId=window.setInterval(function(){cueChange()},500);

  33. function init(){audio.volume = .3;cueChange();}
  34. function cueChange(){
  35.   var cues = textTrack.activeCues;
  36.   if (cues.length > 0){
  37.     lyrics.innerHTML = cues[0].text.replace(/\n/g, '<br>');
  38.   }
  39. }
  40. window.onload = init;
  41. //]]>
  42. </script>
  43.           
  44. <p>---------------------------------------------------------------------------- 2    ---------------------------------</p>
  45. <div id="html5"><h2>You Browser</h2></div>
  46. <audio id="audio"  preload="auto" controls  style="display:block;margin:auto; text-align: center">
  47. <source src="test1.mp3" type="audio/mpeg">
  48. <track id="trk" kind="subtitles" srclang="en" src="test1.vtt" default  />
  49. </audio>

  51. <br/><div id="lyrics"></div><br/>
  52. <script type="text/javascript">
  53. //<![CDATA[

  55. var lyrics = document.getElementById('lyrics');
  56. var audio = document.getElementById('audio');
  57. var track = document.getElementById('trk');
  58. var textTrack = track.track;
  59. //track.addEventListener("cuechange", cueChange, false);   // oncuechange
  60. var nIntervId=window.setInterval(function(){cueChange()},500);

  62. function init(){audio.volume = .3;cueChange();}
  63. function cueChange(){
  64.   var cues = textTrack.activeCues;
  65.   if (cues.length > 0){
  66.     lyrics.innerHTML = cues[0].text.replace(/\n/g, '<br>');
  67.   }
  68. }
  69. window.onload = init;
  70. //]]>
  71. </script>
  72.           

  74.           
  75.           
  76. </body>

  78. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
isdkz
2023-2-18 11:26:53
本帖最后由 isdkz 于 2023-2-18 11:34 编辑

不同元素不要用同一个 id，还有处理不同元素的 script 标签的变量名和方法名最好也不要相同，

代码修改如下：改了 id 和 变量名、方法名，分别加上了 1 和 2
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  5. <title>Pinyin story</title>
  6. <meta name="keywords" content="">
  7. <meta name="description" content="">
  8. <meta name="applicable-device" content="pc">
  9. <meta http-equiv="Cache-Control" content="no-transform">

  11. <link rel="stylesheet" type="text/css" href="a1.css">

  13.        
  14.        

  16. </head>
  17. <body style="padding: 0px;">

  19. <p>----------------------------------------------------------------------------                          1            ---------------------------------</p>
  20.   

  22. <div id="html5"><h2>You Browser Does not support Audio Captions<br/>You will not see the lyrics.</h2></div>



  26. <audio id="audio1"  preload="auto" controls  style="display:block;margin:auto; text-align: center">
  27. <source src="test1.mp3" type="audio/mpeg">
  28. <track id="trk1" kind="subtitles" srclang="en" src="test1.vtt" default  />
  29. </audio>

  31. <br/><div id="lyrics1"></div><br/>


  34. <script type="text/javascript">
  35. //<![CDATA[

  37. var lyrics1 = document.getElementById('lyrics1');
  38. var audio1 = document.getElementById('audio1');
  39. var track1 = document.getElementById('trk1');
  40. var textTrack1 = track1.track;
  41. //track.addEventListener("cuechange", cueChange, false);   // oncuechange
  42. var nIntervId1=window.setInterval(function(){cueChange1()},500);

  44. function init1(){audio1.volume = .3;cueChange1();}
  45. function cueChange1(){
  46.   var cues1 = textTrack1.activeCues;
  47.   if (cues1.length > 0){
  48.     lyrics1.innerHTML = cues1[0].text.replace(/\n/g, '<br>');
  49.   }
  50. }
  51. init1();
  52. //]]>
  53. </script>
  54.           
  55. <p>---------------------------------------------------------------------------- 2    ---------------------------------</p>
  56. <div id="html5"><h2>You Browser Does not support Audio Captions<br/>You will not see the lyrics.</h2></div>



  60. <audio id="audio2"  preload="auto" controls  style="display:block;margin:auto; text-align: center">
  61. <source src="test1.mp3" type="audio/mpeg">
  62. <track id="trk2" kind="subtitles" srclang="en" src="test1.vtt" default  />
  63. </audio>

  65. <br/><div id="lyrics2"></div><br/>


  68. <script type="text/javascript">
  69. //<![CDATA[

  71. var lyrics2 = document.getElementById('lyrics2');
  72. var audio2 = document.getElementById('audio2');
  73. var track2 = document.getElementById('trk2');
  74. var textTrack2 = track2.track;
  75. //track.addEventListener("cuechange", cueChange, false);   // oncuechange
  76. var nIntervId2=window.setInterval(function(){cueChange2()},500);

  78. function init2(){audio2.volume = .3;cueChange2();}
  79. function cueChange2(){
  80.   var cues2 = textTrack2.activeCues;
  81.   if (cues2.length > 0){
  82.     lyrics2.innerHTML = cues2[0].text.replace(/\n/g, '<br>');
  83.   }
  84. }
  85. init2();
  86. //]]>
  87. </script>
  88.           

  90.           
  91.           
  92. </body>

  94. </html>

复制代码

0000000000.zip

219.58 KB, 下载次数: 2
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

isdkz
发表于 2023-2-18 11:26:53 | 显示全部楼层    本楼为最佳答案   
本帖最后由 isdkz 于 2023-2-18 11:34 编辑

不同元素不要用同一个 id，还有处理不同元素的 script 标签的变量名和方法名最好也不要相同，

代码修改如下：改了 id 和 变量名、方法名，分别加上了 1 和 2
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  5. <title>Pinyin story</title>
  6. <meta name="keywords" content="">
  7. <meta name="description" content="">
  8. <meta name="applicable-device" content="pc">
  9. <meta http-equiv="Cache-Control" content="no-transform">

  11. <link rel="stylesheet" type="text/css" href="a1.css">

  13.        
  14.        

  16. </head>
  17. <body style="padding: 0px;">

  19. <p>----------------------------------------------------------------------------                          1            ---------------------------------</p>
  20.   

  22. <div id="html5"><h2>You Browser Does not support Audio Captions<br/>You will not see the lyrics.</h2></div>



  26. <audio id="audio1"  preload="auto" controls  style="display:block;margin:auto; text-align: center">
  27. <source src="test1.mp3" type="audio/mpeg">
  28. <track id="trk1" kind="subtitles" srclang="en" src="test1.vtt" default  />
  29. </audio>

  31. <br/><div id="lyrics1"></div><br/>


  34. <script type="text/javascript">
  35. //<![CDATA[

  37. var lyrics1 = document.getElementById('lyrics1');
  38. var audio1 = document.getElementById('audio1');
  39. var track1 = document.getElementById('trk1');
  40. var textTrack1 = track1.track;
  41. //track.addEventListener("cuechange", cueChange, false);   // oncuechange
  42. var nIntervId1=window.setInterval(function(){cueChange1()},500);

  44. function init1(){audio1.volume = .3;cueChange1();}
  45. function cueChange1(){
  46.   var cues1 = textTrack1.activeCues;
  47.   if (cues1.length > 0){
  48.     lyrics1.innerHTML = cues1[0].text.replace(/\n/g, '<br>');
  49.   }
  50. }
  51. init1();
  52. //]]>
  53. </script>
  54.           
  55. <p>---------------------------------------------------------------------------- 2    ---------------------------------</p>
  56. <div id="html5"><h2>You Browser Does not support Audio Captions<br/>You will not see the lyrics.</h2></div>



  60. <audio id="audio2"  preload="auto" controls  style="display:block;margin:auto; text-align: center">
  61. <source src="test1.mp3" type="audio/mpeg">
  62. <track id="trk2" kind="subtitles" srclang="en" src="test1.vtt" default  />
  63. </audio>

  65. <br/><div id="lyrics2"></div><br/>


  68. <script type="text/javascript">
  69. //<![CDATA[

  71. var lyrics2 = document.getElementById('lyrics2');
  72. var audio2 = document.getElementById('audio2');
  73. var track2 = document.getElementById('trk2');
  74. var textTrack2 = track2.track;
  75. //track.addEventListener("cuechange", cueChange, false);   // oncuechange
  76. var nIntervId2=window.setInterval(function(){cueChange2()},500);

  78. function init2(){audio2.volume = .3;cueChange2();}
  79. function cueChange2(){
  80.   var cues2 = textTrack2.activeCues;
  81.   if (cues2.length > 0){
  82.     lyrics2.innerHTML = cues2[0].text.replace(/\n/g, '<br>');
  83.   }
  84. }
  85. init2();
  86. //]]>
  87. </script>
  88.           

  90.           
  91.           
  92. </body>

  94. </html>

复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

blackantt
 楼主| 发表于 2023-2-18 11:37:57 | 显示全部楼层
isdkz 发表于 2023-2-18 11:26
不同元素不要用同一个 id，还有处理不同元素的 script 标签的变量名和方法名最好也不要相同，

代码修改 ...

感谢，我原来反复改了半天。可能还是有一个地方没改到。结果就不行。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-5-1 09:19

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表