1. <audio id=example-video preload="auto" class="video-js vjs-default-skin" type="audio/wav" hidden="hidden">
  2. <script type="text/javascript" th:src="@{/js/jquery3.4.1.js}"></script>
  3. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.4/video.min.js"></script>
  4. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.4/lang/zh-CN.js"></script>
  5. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
  6. <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
  7. <link href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" rel="stylesheet">
  1. <audio id=example-video preload="auto" class="video-js vjs-default-skin" type="audio/wav" hidden="hidden">
  1. <span>音量</span><input type="range" min="10" max="100" id="volume" step="1" value="50"/><span id="volumeLabel">50%</span>
  1. $("#volume").change(function(){
  2. var volume = $(this).val();
  3. $("#volumeLabel").text("x"+volume+"%");
  4. });
  5.  
  6. var player = videojs('example-video');
  7. player.ready(function() {
  8. var _this = this
  9. //速率
  10. var playbackRate = $("#playbackRate").val();
  11. var speed = parseFloat(playbackRate);
  12.  
  13. var volume = parseFloat($("#volume").val()/100.0);
  14.  
  15. setTimeout(function() {
  16. _this.volume(volume);
  17. //笔者在测试播放视频控件的demo里发现volume是一个属性,不是函数
  18. },20);
  19. });
    ...
    player.play();

videojs改变音量大小的更多相关文章

  1. Android 获取 AudioRecord 麦克风音量大小并做选择性发送

    extends:http://blog.csdn.net/alvinhuai/article/details/8955127,http://mikespook.com/2010/11/android- ...

  2. 控制音量大小widget

    由于手机音量按键非常悲剧的掉了.无法控制手机音量大小.使用起来非常不方便.所以决定写一个小widget放在桌面能够随时控制音量吧.也算是解决一点便利问题. 1.一个简单的widget 由于我的需求非常 ...

  3. JS控制Video播放器(快进、后退、播放、暂停、音量大小)

    思路: 一.首先监听触发事件. 比如:向上键对应的keyCode为38,向下键对应的keyCode为40,向左键对应的keyCode为37,向右键对应的keyCode为39,空格键对应的keyCode ...

  4. JavaScript动画-拖拽改变元素大小

    ▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...

  5. javascript动画系列第四篇——拖拽改变元素大小

    × 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...

  6. WPF实现无边框窗体拖拽右下角▲ 改变窗体大小【framwork4.0】 谢谢大家关注

    效果图:(右下角拖拽改变窗体大小) 第一步:添加xaml代码: <Border Name="ResizeBottomRight" MouseMove="Resize ...

  7. 【Unity】改变向量的方向而不改变其大小

    最近在做一个打砖块游戏时遇到一个小问题,就是小球有可能会在左右两个边界之间做循环往返运动而导致游戏无法继续进行下去,于是我打算让小球在垂直撞向边界时改变一下方向,但是速度不变,尝试了一些方法但是没有达 ...

  8. jquery插件之拖拽改变元素大小

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...

  9. SQLSERVER复制优化之一《改变包大小》

    SQLSERVER复制优化之一<改变包大小> 自从搭了复制之后以为可以安枕无忧了,谁不知问题接踵而来 这次遇到的问题是丢包,不知道情况的读者可以先看一下我之前写的一篇<SQLSERV ...

随机推荐

  1. JS 使用RSA加密解密

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>使 ...

  2. ASP.NET MVC 入门6、TempData

    TempData用来给控制各Action间传递值,或Action给View传递临时值时使用. TempData实际是将值临时存储于Session中. TempData中存储的值只能供一次访问使用, 即 ...

  3. ARP详解

    1.学习ARP前要了解的内容 建立TCP连接与ARP的关系 应用接受用户提交的数据,触发TCP建立连接,TCP的第一个SYN报文通过connect函数到达IP层,IP层通过查询路由表: 如果目的IP和 ...

  4. 洛谷P2396 yyy loves Maths VII【状压dp】

    题目:https://www.luogu.org/problemnew/show/P2396 题意:有n个数,每次选择一个表示走$a[i]$步,每个数只能选一次. 最多有两个厄运数字,如果走到了厄运数 ...

  5. JS 仿支付宝input文本输入框放大组件

    input输入的时候可以在后边显示数字放大镜 <!doctype html> <html lang="en"> <head> <meta ...

  6. 使用jQuery快速高效制作网页交互特效----jQuery中的事件与动画

    jQuery中的事件 和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现. 事件在元素对象与功能代码中起着重要的桥梁作用. 在JQuery中,事件 ...

  7. 001_软件安装之《MATLAB2016安装》

    测试电脑:win7 64位操作系统 下载地址: 链接:https://pan.baidu.com/s/1xkyhF6pdkx_kZiNjFireZw 密码:mvpp     链接:https://pa ...

  8. MongoDB CRUD 操作

    crud是指在做计算处理时的增加(Create).读取查询(Retrieve).更新(Update)和删除(Delete)几个单词的首字母简写.crud主要被用在描述软件系统中数据库或者持久层的基本操 ...

  9. learning scala pattern matching

    code: package com.aura.scala.day01 import scala.util.Random object patternMatching01 { def main(args ...

  10. Gluon学习03-基础数据类型Ndarray

    Gluon学习03-基础数据类型Ndarray 小书匠 kindle  目录,方便快速定位: 1.安装cuda与cudnn 2.安装mxnet-gpu 本机环境介绍: 系统:Linuxmint Pyt ...