播放_播放器 - CSDN
  • 一个很不错的视频播放插件,可以很方便的集成到网站中去,基础支持主流的音视频格式,喜欢的自己下载,测试好用。 支持的格式:.swf|.wmv|.asf|.wma|.mp3|.asx|.mid|.midi|.rm|.ra|.rmvb|.mp4|.mov|.avi|.wav|.ram|....
  • 在线视频播放

    2020-07-30 23:30:30
    支持3gp,MP4等格式,支持快进、快退播放,本地播放、在线播放都可以。
  • 播放器(含源码)

    2020-07-30 20:21:35
    1.支持主流视频格式及封装(avi,mkv,mpg,mp4,rmvb,wmv,vp9,h264,h265等),支持简单的内嵌字幕,绿色小巧,加壳后仅2MB。 2.无需安装MinGW,ffmpeg库采用静态编译,去掉encoder,muxer,filter,精简了decoder/demuxer/...
  • 音频播放组件

    2018-10-10 10:53:53
    <template> <div class="di main-wrap" v-loading="audio.waiting"...-- 这里设置了ref属性后,在vue组件中,就可以用this.$refs.audio来访问该dom元素 --&...
    <template>
      <div class="di main-wrap" v-loading="audio.waiting">
        <!-- 这里设置了ref属性后,在vue组件中,就可以用this.$refs.audio来访问该dom元素 -->
        <audio ref="audio" class="dn" 
        :src="url" :preload="audio.preload"
        @play="onPlay" 
        @error="onError"
        @waiting="onWaiting"
        @pause="onPause" 
        @timeupdate="onTimeupdate" 
        @loadedmetadata="onLoadedmetadata"
        ></audio>
        <div>
          <el-button type="text" @click="startPlayOrPause">{{audio.playing | transPlayPause}}</el-button>
          <el-button v-show="!controlList.noSpeed" type="text" @click="changeSpeed">{{audio.speed | transSpeed}}</el-button>
    
          <el-tag type="info">{{ audio.currentTime | formatSecond}}</el-tag>
    
          <el-slider v-show="!controlList.noProcess" v-model="sliderTime" :format-tooltip="formatProcessToolTip" @change="changeCurrentTime" class="slider"></el-slider>
          
          <el-tag type="info">{{ audio.maxTime | formatSecond }}</el-tag>
    
          <el-button v-show="!controlList.noMuted" type="text" @click="startMutedOrNot">{{audio.muted | transMutedOrNot}}</el-button>
    
          <el-slider v-show="!controlList.noVolume" v-model="volume" :format-tooltip="formatVolumeToolTip" @change="changeVolume" class="slider"></el-slider>
          
        <el-button v-if="canDownload" type="primary" @click="downloadMusic">下载音乐</el-button>
        </div>
      </div>
    </template>
    
    <script>
      import saveAs from 'file-saver' // eslint-disable-line
      var FileSaver = require('file-saver')
      function realFormatSecond(second) {
        var secondType = typeof second
        if (secondType === 'number' || secondType === 'string') {
          second = parseInt(second)
          var hours = Math.floor(second / 3600)
          second = second - hours * 3600
          var mimute = Math.floor(second / 60)
          second = second - mimute * 60
          return hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
        } else {
          return '0:00:00'
        }
      }
      export default {
        props: {
          theUrl: {
            type: String,
            required: true,
          },
          theSpeeds: {
            type: Array,
            default () {
              return [1, 1.5, 2]
            }
          },
          theControlList: {
            type: String,
            default: ''
          }
        },
        name: 'VueAudio',
        data() {
          return {
            url: this.theUrl || 'http://devtest.qiniudn.com/secret base~.mp3',
            audio: {
              currentTime: 0,
              maxTime: 0,
              playing: false,
              muted: false,
              speed: 1,
              waiting: true,
              preload: 'auto'
            },
            sliderTime: 0,
            volume: 100,
            speeds: this.theSpeeds,
            controlList: {
              // 不显示下载
              noDownload: false,
              // 不显示静音
              noMuted: false,
              // 不显示音量条
              noVolume: false,
              // 不显示进度条
              noProcess: false,
              // 只能播放一个
              onlyOnePlaying: false,
              // 不要快进按钮
              noSpeed: false
            }
          }
        },
        methods: {
          setControlList () {
            let controlList = this.theControlList.split(' ')
            controlList.forEach((item) => {
              if(this.controlList[item] !== undefined){
                this.controlList[item] = true
              }
            })
          },
          changeSpeed() {
            let index = this.speeds.indexOf(this.audio.speed) + 1
            this.audio.speed = this.speeds[index % this.speeds.length]
            this.$refs.audio.playbackRate = this.audio.speed
          },
          startMutedOrNot() {
            this.$refs.audio.muted = !this.$refs.audio.muted
            this.audio.muted = this.$refs.audio.muted
          },
          // 音量条toolTip
          formatVolumeToolTip(index) {
            return '音量条: ' + index
          },
          // 进度条toolTip
          formatProcessToolTip(index = 0) {
            index = parseInt(this.audio.maxTime / 100 * index)
            return '进度条: ' + realFormatSecond(index)
          },
          // 音量改变
          changeVolume(index = 0) {
            this.$refs.audio.volume = index / 100
            this.volume = index
          },
          // 播放跳转
          changeCurrentTime(index) {
            this.$refs.audio.currentTime = parseInt(index / 100 * this.audio.maxTime)
          },
          startPlayOrPause() {
            return this.audio.playing ? this.pausePlay() : this.startPlay()
          },
          // 开始播放
          startPlay() {
            this.$refs.audio.play()
          },
          // 暂停
          pausePlay() {
            this.$refs.audio.pause()
          },
          // 当音频暂停
          onPause () {
            this.audio.playing = false
          },
          // 当发生错误, 就出现loading状态
          onError () {
            this.audio.waiting = true
          },
          // 当音频开始等待
          onWaiting (res) {
            console.log(res)
          },
          // 当音频开始播放
          onPlay (res) {
            console.log(res)
            this.audio.playing = true
            this.audio.loading = false
            if(!this.controlList.onlyOnePlaying){
              return 
            }
            let target = res.target
            let audios = document.getElementsByTagName('audio');
            [...audios].forEach((item) => {
              if(item !== target){
                item.pause()
              }
            })
          },
          // 当timeupdate事件大概每秒一次,用来更新音频流的当前播放时间
          onTimeupdate(res) {
            // console.log('timeupdate')
            // console.log(res)
            this.audio.currentTime = res.target.currentTime
            this.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100)
          },
          // 当加载语音流元数据完成后,会触发该事件的回调函数
          // 语音元数据主要是语音的长度之类的数据
          onLoadedmetadata(res) {
            console.log('loadedmetadata')
            console.log(res)
            this.audio.waiting = false
            this.audio.maxTime = parseInt(res.target.duration)
          },
    
            downloadMusic() { // 下载音乐
              FileSaver.saveAs(this.url, this.title)
            }
        },
        filters: {
          formatSecond(second = 0) {
            return realFormatSecond(second)
          },
          transPlayPause(value) {
            return value ? '暂停' : '播放'
          },
          transMutedOrNot(value) {
            return value ? '放音' : '静音'
          },
          transSpeed(value) {
            return '快进: x' + value
          }
        },
        created() {
          this.setControlList()
        }
      }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
      .main-wrap{
        padding: 10px 15px;
      }
      .slider {
        display: inline-block;
        width: 100px;
        position: relative;
        top: 14px;
        margin-left: 15px;
      }
      .di {
        display: inline-block;
      }
      .download {
        color: #409EFF;
        margin-left: 15px;
      }
      .dn{
        display: none;
      }
    </style>

    原文链接 :https://segmentfault.com/a/1190000012453975?utm_source=tuicool&utm_medium=referral

    展开全文
  • 目录1、问题一 框架?2、问题2 控制?3、问题3 坑?坑1坑2 1、问题一 框架? 加个标签就OK! <video id="video1" src="/video1.mp4" controls="controls">...video id="video1" src="/video1.mp4" autoplay>...

    1、问题一 框架?

    加个标签就OK!

    <video id="video1"  src="/video1.mp4"  controls="controls"></video>
    

    2、问题2 控制?

    简单!

    <video id="video1"  src="/video1.mp4"  autoplay></video>
    

    其他控制方式 :见下面的链接w3school说明

    3、问题3 坑?

    我想这个才是你到这里来的原因!

    坑1

    有播放进度,但是没有视频,基本上是你的编码不对:
    坑2

    所以你得转码,推荐格式工厂。

    坑2

    用js控制播放源
    这个坑是送的。
    得把控制源的js代码放在html的后面。例如:
    坑3

    展开全文
  • 用JS实现视频播放器

    2019-08-09 11:50:33
    currentTime:设置或返回音频/视频中的当前播放位置(以秒计) 2.HTML5 Audio/Video 事件: play:音频/视频已开始或不再暂停 pause:音频/视频已暂停 playing:音频/视频在已因缓冲而暂停或停止后已就绪 ...

    知识点

    1.HTML5 Audio/Video 属性:

    • duration:返回当前音频/视频的长度(以秒计)
    • currentTime:设置或返回音频/视频中的当前播放位置(以秒计)
    • muted:设置或返回音频/视频是否静音
    • volume:设置或返回音频/视频的音量

    2.HTML5 Audio/Video 事件:

    • play:音频/视频已开始或不再暂停
    • pause:音频/视频已暂停
    • playing:音频/视频在已因缓冲而暂停或停止后已就绪
    • timeupdate:目前的播放位置已更改

    事件

    1.播放按钮的点击事件(click):
    若按钮当前文本为“播放”,则视频开始播放,且将文本内容改为“暂停”;反之,则视频暂停,且将文本内容改为“播放”;清除计时器

    2.视频开始回放时执行(playing):
    获取当前video的总时间,将该总时间设置给总进度条的max属性中

    3.视频播放位置发生变化时开始执行(timeupdata):
    将当前视频的播放位置赋值给进度条的值

    4.播放进度条事件(鼠标下落):
    (1)将视频暂停
    (2)鼠标移动事件:根据进度条的value按照百分比的换算,在总时间里换算当前的时间,将其值赋给video的播放位置(currentTime)
    (3)鼠标抬起事件:将视频开始播放

    5.快进的点击事件:
    将第一个按钮的文本值改为“播放”;将视频暂停;通过计时器实现video播放的快进

    6.快退的点击事件:
    将第一个按钮的文本值改为“播放”;将视频暂停;通过计时器实现video播放的快退;快退到头时,需将视频自动播放

    7.静音的点击事件:
    使用muted属性

    8.音量进度条事件(鼠标下落):
    根据进度条的value按照百分比的换算,根据volume属性换算当前的音量,将其值赋给video的音量(volume)

    9.全屏的点击事件:
    使用RequestFullScreen,并进行兼容性代码写法

    代码块

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="iconfont/iconfont.css">
        <title></title>
        <style>
            #video {
                width: 700px;
                height: 450px;
                margin: 0 auto;
                border: 1px solid silver;
            }
            #mp4par {
                position: relative;
                width: 700px;
                height: 450px;
                background-color: black;
                float: left;
                overflow: hidden;
            }
            #mp4 {
                position: relative;
                width: 700px;
                height: 450px;
            }
            #controls {
                position: absolute;
                width: 700px;
                height: 75px;
                bottom: -75px;
                z-index: 10;
                background-color: rgba(255, 255, 255, 0.31);
                text-align: center;
                transition: all 0.3s ease-in;
            }
            #mp4par:hover #controls{
                bottom: 0;
            }
            #btntime {
                width: 700px;
                outline: none;
            }
            #btnsound {
                position: relative;
                top: 5px;
            }
            button {
                position: relative;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                outline: none;
                border-style: none;
                background: radial-gradient(#ffae9f, #ff2f39);
                margin: 0 17px;
                color: #474747;
            }
            .iconfont {
                font-size: 24px;
                color: #474747;
            }
        </style>
    </head>
    <body>
    <div id="video">
        <div id="mp4par">
            <video id="mp4" src="./Mp4/徐佳莹%20-%20湫兮如风.mp4"></video>
            <div id="controls">
                <input type="range" id="btntime" value="0" max="100"><br>
                <button id="btnstart" style="top: -4px">播放</button>
                <button id="btngo"><i class="iconfont">&#xe687;</i></button>
                <button id="btnback"><i class="iconfont">&#xe7f3;</i></button>
                <button id="btnmute"><i class="iconfont">&#xe615;</i></button>
                <input type="range" id="btnsound" value="0" max="100">
                <button id="btnbig"><i class="iconfont">&#xe632;</i></button>
                <button><i class="iconfont">&#xe638;</i></button>
            </div>
        </div>
    </div>
    <script>
        var video = document.getElementById("mp4");
        var btnstart = document.getElementById("btnstart");
        var btntime = document.getElementById("btntime");
        var btngo = document.getElementById("btngo");
        var btnback = document.getElementById("btnback");
        var btnmute=document.getElementById("btnmute");
        var btnsound=document.getElementById("btnsound");
        var btnbig=document.getElementById("btnbig");
        var time;
        //视频开始回放时执行
        video.onplaying = function () {
            //获取当前video的总时间
            var allTime = this.duration;
            btntime.setAttribute("max", allTime);
        };
        //视频播放位置发生变化时开始执行
        video.ontimeupdate = function () {
            btntime.value = this.currentTime;
        };
        //播放进度条的事件
        btntime.addEventListener("mousedown", function () {
            video.pause();
            this.onmousemove = function () {
                video.currentTime = this.value;
            };
            this.onmouseup = function () {
                video.play();
                this.onmousemove = null;
                this.onmouseup = null;
            }
        });
        //快进的点击事件
        btngo.addEventListener("click", function () {
            btnstart.innerHTML = "播放";
            video.pause();
            time = setInterval(function () {
                video.currentTime += 5;
            }, 1000);
        });
        //快退的点击事件
        btnback.addEventListener("click", function () {
            btnstart.innerHTML = "播放";
            video.pause();
            time = setInterval(function () {
                video.currentTime -= 2;
                if (video.currentTime <= 0) {
                    video.play();
                    clearInterval(time);
                }
            }, 1000);
        });
        //静音的点击事件
        btnmute.addEventListener("click",function(){
            video.muted=!video.muted;
        });
        //音量进度条的事件
        btnsound.addEventListener("mousedown",function(){
            this.onmousemove=function(){
                video.volume=this.value/100;
            }
            this.onmouseup=function(){
                this.onmousemove=null;
                this.onmouseup=null;
            }
        });
        //全屏的点击事件
        btnbig.addEventListener("click",function(){
            if (video.webkitRequestFullScreen) {
                video.webkitRequestFullScreen();
            }
            else if (video.mozRequestFullScreen) {
                video.mozRequestFullScreen();
            }
            else if (video.msRequestFullScreen) {
                video.msRequestFullScreen();
            }
            else if (video.RequestFullScreen) {
                video.RequestFullScreen();
            }
        });
        //播放的点击事件
        btnstart.addEventListener("click", function () {
            if (this.innerHTML == "播放") {
                video.play();
                this.innerHTML = "暂停";
                clearInterval(time);
            }
            else {
                video.pause();
                this.innerHTML = "播放";
            }
        })
    </script>
    </body>
    </html>
    
    展开全文
  • 播放m3u8在线视频

    2019-06-27 13:39:55
    在线播放m3u8视频,方便问题调查和调试。 http://www.chplayer.com/examples/player.html?videourl={m3u8文件地址}

    在线播放m3u8视频,方便问题调查和调试。

    http://www.chplayer.com/examples/player.html?videourl={m3u8文件地址}

    展开全文
  • 标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题。 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达到1000kbps,文件大小大约1MB;非wifi环境下提供的低码率视频是500kbps...
  • 只能尝试去获取播放源地址 获取播放源地址的过程很曲折,移动端抓包,PC-web端分析,后来,发现一个网站,终于找到了一线希望。 就是ibilibili.com了 这个网站的功能呢,就是很方便的让你获取B站视频的下载地址...
  • 智慧树自动播放工具

    2020-03-13 11:24:21
    描述:实现智慧树教学视频的自动播放,跳过弹题,自动下一节 2018-10-07更新: 更新自动播放的方式提供更为简洁的播放,使用方法: 视频教程http://www.iqiyi.com/w_19s27xv2n5.html 1、访问...
  • 当时我也很好奇MP4视频可以用video标签播放呀,我就经常用,毕竟是好朋友我还是亲自去筛查了一下问题,这不结论处来了,其实就是一个视频编码的问题,格式虽然都是MP4但是html中只支持H.264的编码格式,无奈只能重新...
  • 使用video.js播放视频,如果集成在iframe中,无法自动播放,如何解决呢?其实很简单,设置下 allow=“autoplay” ,如下所示: &lt;iframe src="test.html" width="640" height="360&...
  • 今天跟大家分享百度网盘在线播放电影的方法。 今天跟大家分享搜索电影,并且用百度网盘在线播放的方法。搜索电影用到的工具是[至尊搜索神器],在线观看电影用到的工具是[百度网盘] 1.选中【蓝光电影/种子】搜索...
  • 在浏览器中播放m3u8

    2018-10-13 10:02:34
    在浏览器上播放m3u8的视频地址有两种方式: html的video标签的方式,这种方式播放很简单: &lt;!DOCTYPE hmtl&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;the5fire m3u8 tes...
  • 本文记录SDL播放音频的技术。在这里使用的版本是SDL2。实际上SDL本身并不提供视音频播放的功能,它只是封装了视音频播放的底层API。在Windows平台下,SDL封装了Direct3D这类的API用于播放视频;封装了DirectSound这...
  • 本文将提供两种方法介绍如何播放m3u8链接 第一种是添加浏览器插件 Native HLS Playback ,此处以Firefox举例(谷歌浏览器也可以用这个插件,苹果电脑自带浏览器Safari可以直接播放m3u8链接无需下载插件),先进入附加...
  • videojs集成--播放rtmp流

    2019-01-22 10:10:00
    之前说到已经把流推送过来了,这时候就可以使用videojs来进行显示播放。 首先要先有一个文件,那就是video-js.swf 因为,这种播放方式html已经不能很好的进行播放了,需要用到flash来播放,videojs在这个地方就...
  • 但Mac/Ubuntu的新手使用VLC播放视频时都会碰到字幕乱码的问题,我遇到的问题是加载中文字幕是会出现中文乱码问题。字幕的格式有多种,这里假设你使用常见的.srt字幕。VLC默认支持的字幕内码为utf-8,而网上提供的....
  • 该文章主要针对 android 的音乐播放器软件进行简单的功能添加:播放、断点播放、停止、上一曲、下一曲、随机播放、显示当前播放歌曲(后续会为当前显示的播放添加动画);软件开发流程: 1、先向内存卡导入音乐文件...
  • Android实现在线播放音乐 2014年3月10日 hello,小伙伴们,3月份珊珊来迟的第一篇博客,最近小巫在找工作,加上又生病了,就没有太多精力去写博客了。今天拖着病发表一篇之前已经实现的在线播放音乐效果,在线播放...
1 2 3 4 5 ... 20
收藏数 459,675
精华内容 183,870
关键字:

播放