一个简单的网页播放器

最新推荐文章于 2021-04-11 17:43:46 发布
最新推荐文章于 2021-04-11 17:43:46 发布
阅读量956 收藏 1
点赞数
分类专栏： javascript 文章标签： input button function xhtml javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang329382414/article/details/3850925
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>永胜技术之家</title>
</head>

 

<script language="javascript" type="text/javascript">  
  
  function Add()
  {
   selUrl.options.add(new Option(txtUrl.value))
  
  }
 
  function Play()
   {
    
  Player1.controls.play();
  }
 
  function Pause()
  {
    Player1.controls.pause()
  }
 
  function Stop()
  {
    Player1.controls.stop()
  }
 
  function Prev()
  {
      Player1.controls.stop()
     if(selUrl.selectedIndex==0)
   {
       selUrl.selectedIndex=selUrl.length-1
    }
    else
    {
     selUrl.selectedIndex-=1
    }
    Player1.URL=selUrl.options[selUrl.selectedIndex].value.toString()
    Player1.controls.play();
  
  }
 
  function Next()
  {
     if(selUrl.selectedIndex==selUrl.length)
   {
       selUrl.selectedIndex=0
    }
    else
    {
     selUrl.selectedIndex+=1
    }
    Player1.URL=selUrl.options[selUrl.selectedIndex].value.toString()
    Player1.controls.play();
  }
</script>
<body>
<p>
  <OBJECT ID="Player1"
  CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
    <PARAM NAME="AutoStart" VALUE="False"> 
  </OBJECT>
 
  <SCRIPT LANGUAGE = "JScript"  FOR = Player1 EVENT = playStateChange(NewState)>

// Test for the player current state, display a message for each.
switch (NewState){
    case 1:
        myText.value = "Stopped";  
        break;

    case 2:
        myText.value = "Paused";
        break;

    case 3:
        myText.value = "Playing";
        break;

    // Other cases go here.

    default:
        myText.value = "";
}
</SCRIPT>

</p>
<p>
  <label></label>
  <label>
  <input name="myText" type="text" id="myText"  width="400" />
  <input name="txtUrl" type="text" id="txtUrl"  width="400" />
  <input name="btnAdd" type="submit" id="btnAdd" value="添加"  οnclick="Add()" />
</label>
  <select name="selUrl" size="15" multiple="multiple" id="selUrl" height="200">
    <option  value="http://localhost/music/刀郎-情人.mp3">http://localhost/music/刀郎-情人.mp3</option>
    <option  value="http://localhost/music/刘欢-在路上.mp3">http://localhost/music/刘欢-在路上.mp3</option>
    <option  value="http://localhost/music/刘欢-得民心者得天下.mp3">http://localhost/music/刘欢-得民心者得天下.mp3</option>
    <option  value="http://localhost/music/刘欢-从头再来.mp3">http://localhost/music/刘欢-从头再来.mp3</option>
            </select>
</p>
<p>

  <label>
  <input type="button" name="Submit" value="播放" οnclick="Play()" />
  </label>
  <input type="button" name="Submit2" value="停止"  οnclick="Stop()"/>
  <input type="button" name="Submit3" value="上一首" οnclick="Prev()" />
  <input type="button" name="Submit4" value="下一首" οnclick="Next()" />
  <input type="button" name="Submit5" value="添加歌曲"  οnclick="Add()"/>
  <input type="button" name="Submit6" value="删除歌曲" />
</p>
<a href="http://www.livesnowfirst.cn">永胜技术之家</a>
</body>
</html>

wang329382414
关注
专栏目录
前端小白学习——简单的网页播放器
qq_45093177的博客
06-07 349
前端学习——简单的视频播放 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <link rel="stylesheet" type="text/css" href="../css/less2.css"/> <style type="text/css"> *{ margin
一个超级简单的网页播放器
兰色天空
11-15 1104
 首先新建index.html兰色天空mvpdata上面连接的是你的主站的首页这里连接的是背景音乐的播放页面--相对地址要填好哦再次,exobudpl.js为音乐地址可以用记事本打开编辑,只需要改音乐地址就好.exobud.htm，为播放页，使用时可以把这个页面插入网页中可以直接用记事本打开，然后编辑下载请进我的个人网站http://www.mvpdata.com/article.asp?id=3
简易播放器实现
weixin_34107739的博客
04-08 134
做了个简易音乐播放器。 演示代码：http://codepen.io/makaiqian/pen/eybvq 基本功能： 1.播放、暂停 2.上一首、下一首 简单说下它的核心代码： 1. 定义 var $music = $(‘#js-music’)[0]; 定义的时候是$(‘#js-music’)[0]，而不是$(‘#js-music’)的原...
cPlayer一个漂亮和简洁的HTML5网页音乐播放器
08-11
cPlayer：一个漂亮和简洁的HTML5网页音乐播放器
网页播放器（编写网页用）
07-29
一块很好用的网页播放器 个人觉得不错 推荐给大家
网页播放器
12-25
"Mplayer-master"可能是一个基于MPlayer的开源网页播放器实现。MPlayer是一款强大的跨平台命令行媒体播放器，能够处理各种音频和视频格式。将MPlayer与Web技术结合，可以创建一个能在浏览器中运行的播放器。 在...
简单视频播放器网页模板
01-22
【简单视频播放器网页模板】是一个专为网页设计者和开发者提供的基础工具，它使得创建具有视频播放功能的网页变得更加便捷。此模板适用于那些希望在网站上集成视频内容，但又不想投入大量时间和精力去编写复杂的...
axvlc_网站播放插件_alc播放器_needs1x4_ALC网页播放器插件0.8.9_axvlc_
10-03
在实际应用中，ALC网页播放器插件的安装和使用通常非常简单。用户只需要在信任的源下载 CAB 文件，然后按照提示进行安装。一旦安装成功，浏览器会自动识别并启用插件，使得网页上的媒体元素可以直接播放，无需跳转到...
网页音乐播放器(个人制作)
09-04
我在大学毕业时做的毕业设计——在线音乐网站实现，搜集了很多网页音乐播放器的资料，加上现在的整理，自己做了一个网页音乐播放器。 相关的说明在压缩包的【readme】文件中，希望给予正在开发网页音乐播放器的人员...
一个最简单的HTML5播放器
heibao111728的博客
10-26 1052
&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Video Player Html5&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Video Player Html5&lt;/h1&gt; &lt;video src=&quo
网页实现一个简单的音乐播放器（大佬别看。(⊙﹏⊙)）
qq_44210563的博客
10-30 11万+
今天闲着无事，就想写点东西。然后听了下歌，就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 演示地点演示 html代码如下` music 这个年纪 七月的风 音乐 ` 然后就是css`*{ margin: 0; padding: 0; text-decoration: none; list-...
简易html视频播放器
weixin_34393428的博客
04-23 760
2019独角兽企业重金招聘Python工程师标准>>> ...
简易网页音乐播放器制作
weixin_42280470的博客
09-17 4605
简单的html 音乐播放器制作 首先第一步找图片资源 音乐资源 放入到img文件夹中 第二步对页面布局进行布置 第三步书写js代码 复制代码运行的时候需要将图片资源，音乐资源换个名称。 运行实现图片的切换，效果如图： 代码如下： 希望各位喜欢！！！1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> ...
HTML：给自己设计一个简单的专属网页音乐播放器
有意栽花花不发，无心插柳柳成荫。
04-11 5546
Hello，大家好，我是wangzirui32，今天我们来学习如何给自己设计一个简单的网页音乐播放器。 开始学习吧！ 学习目录1. 项目架构2. player.html 编写3. style.css 编写4. 结果展示写在最后 1. 项目架构 结构如下，请自行创建文件： demo/ style.css player.html 2. player.html 编写 代码如下： <!DOCTYPE html> <html lang="en"> <head> &lt
JavaScript操作播放器
java爱好者专栏
02-26 337
用js控制播放器的代码有详细注释 [code="java"] New Document ...
用JavaScript实现简易的网页音乐播放器
DecadeXCosmos的博客
03-22 5555
用JavaScript实现简易的网页音乐播放器 最近疫情在家，利用这段时间开始自学HTML等内容，目前在写自己的个人主页，想用音乐来给自己的主页增添点特色。 一开始单纯用audio标签添加音乐，带上autoplay和loop属性，但在让朋友测试这个页面的时候遇到了问题： 这个问题意味着，Safari在没有用户操作的情况下不会自动播放所插入的音乐，也就是说autoplay是没有用的，但是audio...
最简单的基于Flash的流媒体示例：网页播放器（HTTP，RTMP，HLS）
热门推荐
雷霄骅(leixiaohua1020)的专栏
02-25 21万+
本文继续上一篇文章，记录一些基于Flash的流媒体处理的例子。本文记录一些基于Flash技术的网页播放器。基于Flash的网页播放器相比于其他网页播放器来说最大的优势就是“免插件安装”了，这一点可以很大的提高用户的体验质量。早些时候网络视频（尤其是直播）一般都使用ActiveX控件作为视频播放器，而这些控件并不普及，所以终端用户必须下载相关的插件才能收看节目，因而对很多不熟悉电脑的用户造成了很大的
github上十二款Android播放器开源项目
smile_to_me的博客
11-28 1264
1.ijkplayer 项目地址： https://github.com/Bilibili/ijkplayer 介绍：Ijkplayer 是Bilibili发布的基于 FFplay 的轻量级 Android/iOS 视频播放器。实现了跨平台功能，API 易于集成；编译配置可裁剪，方便控制安装包大小；支持硬件加速解码，更加省电；提供 Android 平台下应用弹幕集成的解决方案。2.ExoPlay
写一个简易的网页底部音乐播放器
最新发布
06-02
好的，我可以给你提供一个简单的示例代码，你可以根据需要进行修改和完善。 首先，在 HTML 文件中添加音乐播放器的基本结构： ```html <audio id="audio-player" controls> <source src="your-music-file.mp3" type="audio/mpeg"> </audio> <div id="audio-controls"> <button id="play-button">播放</button> <button id="pause-button">暂停</button> <input type="range" id="volume-slider" min="0" max="1" step="0.1" value="1"> </div> ``` 其中，`<audio>` 标签用于定义音频内容，`controls` 属性会自动显示浏览器的默认控件。`<source>` 标签用于指定音频文件的 URL 和 MIME 类型。 `<div>` 标签用于包含播放器的控制按钮和音量调节器。其中，`<button>` 标签用于定义按钮，`<input>` 标签用于定义滑动条。 接下来，在 JavaScript 文件中添加与播放器相关的事件和函数： ```javascript const audioPlayer = document.getElementById("audio-player"); const playButton = document.getElementById("play-button"); const pauseButton = document.getElementById("pause-button"); const volumeSlider = document.getElementById("volume-slider"); function playAudio() { audioPlayer.play(); } function pauseAudio() { audioPlayer.pause(); } function setVolume() { audioPlayer.volume = volumeSlider.value; } playButton.addEventListener("click", playAudio); pauseButton.addEventListener("click", pauseAudio); volumeSlider.addEventListener("input", setVolume); ``` 其中，`document.getElementById()` 方法用于获取 HTML 元素的引用。`playAudio()` 函数用于启动播放器，`pauseAudio()` 函数用于暂停播放器，`setVolume()` 函数用于设置音量大小。 最后，你可以使用 CSS 样式表来美化播放器的外观和布局，例如： ```css #audio-controls { display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #f5f5f5; } #play-button, #pause-button { border: none; background-color: #4caf50; color: #fff; padding: 10px 20px; border-radius: 5px; cursor: pointer; } #play-button:hover, #pause-button:hover { background-color: #3e8e41; } #volume-slider { width: 100px; height: 20px; } ``` 以上就是一个简单的网页底部音乐播放器的实现示例，你可以根据自己的需求进行修改和完善。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值