1. 首页
  2. 分类
  3. javascript
【uniapp】(使用webview)引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频
System
2024-08-21
所有,javascript

在uniapp中使用webview来引入Dplayer.js和hls.js以播放m3u8直播流视频，你需要做以下几步：

  1. 在uniapp项目中的页面（例如index.vue）中添加webview标签。
  2. 在webview中加载一个HTML页面，该页面引入了Dplayer.js和hls.js。
  3. 在HTML页面中初始化Dplayer并使用hls.js来处理m3u8流。

以下是一个简单的示例：




<!-- index.vue -->
<template>
  <view class="content">
    <web-view src="/path/to/your/video.html"></web-view>
  </view>
</template>

在你的项目目录中创建一个HTML文件（例如video.html），并添加以下内容：




<!-- video.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Video Player</title>
    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
</head>
<body>
<div id="dplayer"></div>
<script>
    if(Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource('https://your-m3u8-stream-url.m3u8');
        hls.attachMedia(document.getElementById('dplayer'));
        hls.on(Hls.Events.MANIFEST_PARSED, function() {
            hls.startLoad();
        });
    }
    else if (video.canPlayType('application/vnd.apple.mpegURL')) {
        video.src = 'https://your-m3u8-stream-url.m3u8';
        video.addEventListener('loadedmetadata', function() {
            video.play();
        });
    }
</script>
</body>
</html>

请确保替换your-m3u8-stream-url.m3u8为你的直播流地址。

注意：由于跨域限制，确保你的m3u8流和TS视频文件的服务器配置了CORS，否则可能会遇到播放问题。

在uniapp中使用webview时，请确保你的应用已经正确配置了webview权限，并且对应的页面在各个平台（如iOS和Android）上均已正确签名和打包。

- 阅读更多 -
分析 JS 与 CSS 是否阻塞 DOM 的渲染和解析
System
2024-08-21
所有,javascript

在浏览器中，JavaScript 和 CSS 的加载可能会阻塞 DOM 的渲染和解析。这是因为浏览器为了避免出现无样式内容的闪烁（FOUC - Flash of Unstyled Content）或无结构内容的空白屏，会在解析完 HTML 之后，立即渲染出 DOM，然后才执行 CSS 和 JavaScript 的下载及执行。

解决这个问题的关键是减少 JavaScript 和 CSS 文件的体积，使用异步加载（例如通过动态创建 <script> 或 <link> 标签），并且将它们放在文档的底部，接近 </body> 标签处。

以下是一个简单的示例，展示了如何将 CSS 和 JavaScript 文件置于底部加载：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 样式表置于头部但设置为异步加载 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 页面内容 -->
    <div>
        <h1>Hello World</h1>
    </div>
 
    <!-- JavaScript 文件置于底部 -->
    <script src="script.js" async></script>
</body>
</html>

在这个例子中，CSS 文件会阻塞 DOM 的渲染，但不会阻塞 JavaScript 的加载，因为我们使用了 async 属性。JavaScript 文件置于页面底部，不会阻塞 DOM 的解析，而且它会在文档加载完成后执行。这样可以提升页面的渲染性能。

- 阅读更多 -
Js——时间戳和普通日期（年月日）的相互转换
System
2024-08-21
所有,javascript

在JavaScript中，可以使用内置的Date对象来进行时间戳和普通日期（年月日）的互相转换。

时间戳转普通日期：




// 假设 timestamp 是一个时间戳（单位：毫秒）
var timestamp = 1609459200000; // 例如：2021-01-01 00:00:00
var date = new Date(timestamp);
var year = date.getFullYear();
var month = date.getMonth() + 1; // 月份是从0开始的
var day = date.getDate();
 
console.log(year, month, day); // 输出：2021 1 1

普通日期转时间戳：




// 假设 year, month, day 分别是年、月、日
var year = 2021;
var month = 1; // 实际月份应该是0-11的数字，1代表1月
var day = 1;
 
// 创建Date对象
var date = new Date(year, month - 1, day); // 注意月份是从0开始的
 
// 获取时间戳
var timestamp = date.getTime(); // 或者使用 date.valueOf() 或者 date.getTime()
 
console.log(timestamp); // 输出：1609459200000

请注意，在JavaScript中，月份是从0开始的，即0代表1月，11代表12月。因此在将年月日转换为Date对象时，月份应该减去1。而从Date对象获取月份时，应该加上1来获取正确的月份值。

- 阅读更多 -
nodejs 实现方法返回值常见方式
System
2024-08-21
所有,javascript

在Node.js中，实现方法的返回值可以通过多种方式，以下是一些常见的方式：

  1. 使用return语句返回值：



function add(a, b) {
  return a + b;
}
console.log(add(5, 3)); // 输出: 8
  1. 使用回调函数处理异步操作：



function fetchData(callback) {
  // 假设这是一个异步操作，如读取文件
  fs.readFile('data.txt', 'utf8', (err, data) => {
    if (err) {
      callback(err, null);
    } else {
      callback(null, data);
    }
  });
}
 
fetchData((err, result) => {
  if (err) {
    console.error('Error fetching data:', err);
  } else {
    console.log('Data:', result);
  }
});
  1. 使用Promise处理异步操作：



function getData() {
  return new Promise((resolve, reject) => {
    fs.readFile('data.txt', 'utf8', (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  });
}
 
getData().then(data => {
  console.log('Data:', data);
}).catch(err => {
  console.error('Error fetching data:', err);
});
  1. 使用async/await简化Promise：



async function getData() {
  try {
    const data = await fs.promises.readFile('data.txt', 'utf8');
    return data;
  } catch (err) {
    console.error('Error fetching data:', err);
    throw err;
  }
}
 
(async () => {
  try {
    const result = await getData();
    console.log('Data:', result);
  } catch (err) {
    // 错误处理
  }
})();

以上代码展示了在Node.js中实现方法返回值的常见方式。开发者可以根据实际场景选择合适的方法。

- 阅读更多 -
js引入jqury实现数字滚动效果
System
2024-08-21
所有,javascript

要在JavaScript中引入jQuery实现数字滚动效果，你可以使用animate方法结合Number原生JavaScript对象的toFixed方法来创建这种效果。以下是一个简单的例子：

HTML部分：




<div id="number">0</div>

CSS部分：




#number {
  font-size: 24px;
  font-weight: bold;
}

JavaScript部分（确保在引入jQuery之后执行）：




$(document).ready(function(){
  var targetNumber = 1234.56; // 设置目标数字
  var currentNumber = 0; // 初始数字
 
  function animateValue(target) {
    // 每次调用该函数，当前数字会接近目标数字
    var animationSpeed = 500; // 动画持续时间（毫秒）
    var increment = target / (animationSpeed / 10); // 计算每次增加的量
 
    if (currentNumber < target) {
      currentNumber = Math.min(target, currentNumber + increment);
      $('#number').text(currentNumber.toFixed(2)); // 保留两位小数
    }
 
    if (currentNumber !== target) {
      setTimeout(function() {
        animateValue(target);
      }, 10);
    }
  }
 
  animateValue(targetNumber); // 开始动画
});

确保在HTML中引入了jQuery库：




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

这段代码会在页面加载完成后，将元素#number中的文本从0滚动到1234.56，并保留两位小数。你可以根据需要调整targetNumber的值来设置不同的目标数字。

- 阅读更多 -
如何使用 await-to-js 库优雅的处理 async await 错误
System
2024-08-21
所有,javascript

await-to-js 是一个小型的库，它提供了一个实用的函数 to，用于简化异步函数中的错误处理。以下是如何使用 await-to-js 来优雅处理异步函数中的错误：

首先，安装 await-to-js：




npm install await-to-js

然后，在你的代码中引入 to 函数并使用它：




const to = require('await-to-js');
 
async function fetchUserData() {
    let err, userData;
    [err, userData] = await to(async () => {
        const response = await fetch('https://api.example.com/user');
        return response.json();
    });
 
    if (err) {
        // 处理错误
        console.log('Error fetching user data:', err);
        return;
    }
 
    // 继续使用 userData
    console.log('User data:', userData);
}
 
fetchUserData();

在这个例子中，to 函数接收一个异步函数作为参数，并返回一个数组，数组的第一个元素是捕获到的错误（如果有的话），第二个元素是异步操作的结果。通过检查第一个元素是否有值，你可以轻松地处理错误情况。

- 阅读更多 -
JS怎么实现数组内的值累加
System
2024-08-21
所有,javascript

在JavaScript中，可以使用reduce方法来累加数组内的值。reduce方法对数组中的每个元素执行一个提供的reducer函数，将其结果汇总为单个输出值。

以下是使用reduce方法累加数组内所有值的示例代码：




const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出：15

在这个例子中，reduce方法的第一个参数是一个回调函数，该函数接受两个参数：累加器accumulator和当前值currentValue。回调函数的返回值被作为下一次调用回调函数时的accumulator值。第二个参数是reduce的初始值，即累加器的初始值。在这个例子中，初始值是0。

- 阅读更多 -
THREE.JS 使用TransformControls对模型拖拽
System
2024-08-21
所有,javascript

在Three.js中，要使用TransformControls对模型进行拖拽操作，你需要先创建一个场景、相机、渲染器和TransformControls实例。然后，将要操作的模型添加到场景中，并启用TransformControls。下面是一个简单的例子：




// 引入必要的库
import * as THREE from 'three';
import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
 
// 场景、相机和渲染器设置
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 添加模型到场景
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
// 创建TransformControls并添加到场景
const controls = new TransformControls(camera, renderer.domElement);
controls.attach(cube);
scene.add(controls);
 
// 启用拖拽
controls.enabled = true;
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  controls.update(); // 更新TransformControls
}
 
animate();

在这个例子中，我们创建了一个立方体模型，并通过TransformControls对其进行拖拽操作。你需要在你的项目中引入Three.js和TransformControls.js。记得在HTML文件中设置正确的three.js和TransformControls.js的路径。

这段代码提供了一个基本框架，你可以在此基础上根据自己的需求进行定制化开发。例如，你可以添加事件监听器来处理拖拽开始和拖拽结束等事件。

- 阅读更多 -
js中数字精度丢失问题详解（如何解决）
System
2024-08-21
所有,javascript

在JavaScript中，当你直接将一个数字赋值给另一个变量，或者在计算过程中，如果这个数字非常大或者非常小，JavaScript可能会导致精度的丢失。这是因为JavaScript中的Number类型采用IEEE 754标准，这个标准规定了浮点数的表示，而这种表示有时会导致小数位数不准确。

解决方法：

  1. 使用toFixed()方法：在进行运算之前，你可以使用toFixed(n)方法将数字转换为字符串，这样可以保留n位小数，但要注意最终结果仍然是字符串。



let num = 0.1;
let result = (num * 100).toFixed(2); // "10.00"
  1. 使用Big.js或bignumber.js库：这些库提供了处理大数和高精度计算的功能。



// 使用big.js
let bigNum = new Big(0.1);
let result = bigNum.times(100); // "10"
  1. 使用数学上的技巧：例如，如果你在金融应用中遇到精度问题，可以通过对数计算来避免直接处理小数。



// 计算 a 和 b 的和，a 和 b 都很大，可能会有精度问题
let a = 12334567890123;
let b = 45678901230123;
 
// 对数计算
let sum = Math.exp(Math.log(a) + Math.log(b));
  1. 使用JavaScript中的Math.round(), Math.floor(), Math.ceil()等方法，根据实际需求选择最接近的整数。

总结，当你遇到JavaScript数字精度问题时，可以考虑使用toFixed()，引入Big.js或bignumber.js库，或者使用对数计算等方法来解决。

- 阅读更多 -
js如何播放音乐mp3
System
2024-08-21
所有,javascript

在JavaScript中播放音乐可以使用HTML5的<audio>元素。以下是一个简单的例子：




<!DOCTYPE html>
<html>
<body>
 
<audio id="myAudio">
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
 
<script>
// 获取audio元素
var myAudio = document.getElementById("myAudio");
 
// 播放音乐
function playMusic() {
  myAudio.play();
}
 
// 调用函数来播放音乐
playMusic();
</script>
 
</body>
</html>

确保你的music.mp3文件路径是正确的。如果你想在音乐文件未能加载时给出提示，可以监听canplaythrough事件。




myAudio.addEventListener('canplaythrough', function() {
  console.log('音乐文件已加载，可以无缝播放至结尾');
}, false);

如果你需要处理播放错误，可以监听error事件：




myAudio.addEventListener('error', function() {
  console.error('音乐播放出错：', myAudio.error);
}, false);

记得在实际应用中，你可能需要处理不同浏览器的兼容性问题，但是使用上述的<audio>元素和JavaScript，你可以在大多数现代浏览器中播放音乐文件。

- 阅读更多 -
Copyright © 2024 Tech Blog
All Right Reserved | 京ICP备19053165号