python自动播放网页视频_[JavaScript] audio在浏览器中自动播放

最新推荐文章于 2024-05-14 15:41:48 发布

weixin_39950824

最新推荐文章于 2024-05-14 15:41:48 发布

阅读量799

点赞数

文章标签： python自动播放网页视频

audio 在浏览器中自动播放

autoplay 属性

autoplay 属性规定一旦音频就绪马上开始播放。

如果设置了该属性，音频将自动播放。

使用 autoplay 属性进行播放

//使用autoplay属性

var src = "./award.wav";

var body = document.getElementsByTagName("body")[0];

if (body.getElementsByTagName("audio").length <= 0) {

var audio = document.createElement("audio");

audio.setAttribute("id", "awardAudio");

audio.setAttribute("autoplay", "autoplay");

audio.setAttribute("src", src);

body.appendChild(audio);

setTimeout(function() {

body.removeChild(audio);

}, 2300);

}

oncanplaythrough 事件

oncanplaythrough 事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。

在视频/音频（audio/video）加载过程中，事件的触发顺序如下:

onloadstart

ondurationchange

onloadedmetadata

onloadeddata

onprogress

oncanplay

oncanplaythrough

//1

//2

audio.oncanplaythrough=function(){event()};

//3

audio.addEventListener("canplaythrough", event;

监听 canplaythrough 事件进行播放

// 监听加载事件执行play方法

var src = "./award.wav";

var body = document.getElementsByTagName("body")[0];

if (body.getElementsByTagName("audio").length <= 0) {

var audio = document.createElement("audio");

audio.setAttribute("id", "awardAudio");

audio.setAttribute("src", src);

body.appendChild(audio);

//判断音频是否加载完成?

audio.addEventListener(

"canplaythrough",

function() {

audio.play();

setTimeout(function() {

body.removeChild(audio);

}, audio.duration * 1000 + 100);

false

);

}

duration 在 autoplay 下回失效,返回 NaN

JS 报错:Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

https://goo.gl/xX8pDD这里是官方给出的解释,chrome66 之后反正是不能用了

解决方法

在 chrome 浏览器中输入 chrome://flags/#autoplay-policy

在 Autoplay policy 下拉中设置无需用户手势

重启 chrome

或

chrome.exe --disable-features=AutoplayIgnoreWebAudio

MDN->audio 属性

src 歌曲的路径

preload 是否在页面加载后立即加载（设置 autoplay 后无效）

controls 显示 audio 自带的播放控件

loop 音频循环

autoplay 音频加载后自动播放

currentTime 音频当前播放时间

duration 音频总长度

ended 音频是否结束

muted 音频静音为 true

volume 当前音频音量

readyState 音频当前的就绪状态

MDN->audio 事件

abort 当音频/视频的加载已放弃时

canplay 当浏览器可以播放音频/视频时

canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时

durationchange 当音频/视频的时长已更改时

emptied 当目前的播放列表为空时

ended 当目前的播放列表已结束时

error 当在音频/视频加载期间发生错误时

loadeddata 当浏览器已加载音频/视频的当前帧时

loadedmetadata 当浏览器已加载音频/视频的元数据时

loadstart 当浏览器开始查找音频/视频时

pause 当音频/视频已暂停时

play 当音频/视频已开始或不再暂停时

playing 当音频/视频在已因缓冲而暂停或停止后已就绪时

progress 当浏览器正在下载音频/视频时

ratechange 当音频/视频的播放速度已更改时

seeked 当用户已移动/跳跃到音频/视频中的新位置时

seeking 当用户开始移动/跳跃到音频/视频中的新位置时

stalled 当浏览器尝试获取媒体数据，但数据不可用时

suspend 当浏览器刻意不获取媒体数据时

timeupdate 当目前的播放位置已更改时

volumechange 当音量已更改时

waiting 当视频由于需要缓冲下一帧而停止

在react中做成组件

/**

* Created by easterCat on 2017/10/13.

import React from 'react';

import ReactDOM from 'react-dom';

import {connect} from 'react-redux';

import {Icon} from 'antd';

class RecordAudio extends React.Component {

constructor(props) {

super(props);

this.state = {

isPlay: false,

openMuted: false,

volume: 100,

allTime: 0,

currentTime: 0

};

this.millisecondToDate = (time) => {

const second = Math.floor(time % 60);

let minite = Math.floor(time / 60);

return `${minite}:${second >= 10 ? second : `0${second}`}`

};

this.controlAudio = (type, e) => {

const audio = ReactDOM.findDOMNode(this.refs['audio']);

switch (type) {

case 'allTime':

this.setState({

allTime: audio.duration

});

break;

case 'play':

audio.play();

this.setState({

isPlay: true

});

break;

case 'pause':

audio.pause();

this.setState({

isPlay: false

});

break;

case 'changeCurrentTime':

this.setState({

currentTime: e.target.value

});

audio.currentTime = e.target.value;

if (e.target.value === audio.duration) {

this.setState({

isPlay: false

})

}

break;

case 'getCurrentTime':

this.setState({

currentTime: audio.currentTime

});

if (audio.currentTime === audio.duration) {

this.setState({

isPlay: false

})

}

break;

// 是否静音

case 'muted':

audio.muted = !audio.muted;

//为true，则是静音模式

if (audio.muted) {

this.setState({

openMuted: true,

volume: 0

});

} else {

this.setState({

openMuted: false,

volume: 100

});

}

break;

// 调节音量

case 'changeVolume':

/**

* muted=true开启静音模式,muted=false开启声音

* @type {number}

audio.volume = e.target.value / 100;

this.setState({

volume: e.target.value,

});

//如果声音为0，开起静音

if (e.target.value <= 0) {

audio.muted = true;

this.setState({

openMuted: true

})

} else if (e.target.value >= 0) {

audio.muted = false;

this.setState({

openMuted: false

})

}

break

}

componentDidMount() {

}

render() {

const {src} = this.props;

return (

src={src}

preload={true}

onCanPlay={() => this.controlAudio('allTime')}

onTimeUpdate={(e) => this.controlAudio('getCurrentTime')}

音乐播放器

onClick={() => this.controlAudio(this.state.isPlay ? 'pause' : 'play')}

{

this.state.isPlay ? :

}

{

this.millisecondToDate(this.state.currentTime) + '/' + this.millisecondToDate(this.state.allTime)

}

className="time"

min="0"

step="0.01"

max={this.state.allTime}

value={this.state.currentTime}

onChange={(e) => this.controlAudio('changeCurrentTime', e)}

onClick={() => this.controlAudio('muted')}

{

this.state.openMuted ? :

}

className="volume"

min="0"

step="1"

max="100"

onChange={(e) => this.controlAudio('changeVolume', e)}

value={this.state.openMuted ? 0 : this.state.volume}

)

}

const mapStateToProps = (state) => {

return {}

};

const mapActionCreators = {};

export default connect(mapStateToProps, mapActionCreators)(RecordAudio);

在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

HL AsySocket 服务开发框架 - 一般性测试1

一概述 Socket服务器性能要好就要经过无数次的测试,来保证,以下是记录一次的测试经过. 机器配置:Inter(R) Core(TM) i3-2310m CPU 2.10GHz RAM 6.00G ...

iOS开发 coreText

coreText的demo下载地址:http://download.csdn.net/detail/shaoting19910730/9254143 NSTextView和Attribued Stri ...

emWin使用外部SRAM的方法

我用的是stm32,加了1MB的外部SRAM,在使用emWin的时候,将一部分内存分配给emWin使用.其实方法很简单,传入SRAM数据总线地址即可,数据位宽我采用16bit,因为使用的SRAM是16 ...

hdoj 1702 ACboy needs your help again&excl;【数组模拟+STL实现】

ACboy needs your help again! Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ( ...

Programming Concepts

Attributes Attributes provide a powerful method of associating metadata, or declarative information, ...

在 React 中使用 JSX 的好处

优点: 1.允许使用熟悉的语法来定义 HTML 元素树: 2.提供更加语义化且移动的标签: 3.程序结构更容易被直观化: 4.抽象了 React Element 的创建过程: 5.可以随时掌控 HTM ...

修改注册表&period;exe的文件目录

文件打开方式不能选择默认打开文件 cmd >regedit 以sublime_text为例 HKEY_CLASSES_ROOT/Applications/sublime_text.exe/she ...

Python 标准输出 sys&period;stdout 重定向（转）

add by zhj: 其实很少使用sys.stdout,之前django的manage.py命令的源码中使用了sys.stdout和sys.stderr,所以专门查了一下这两个命令与print的区 ...

weixin_39950824

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
python自动播放网页视频_[JavaScript] audio在浏览器中自动播放

audio 在浏览器中自动播放autoplay 属性autoplay 属性规定一旦音频就绪马上开始播放。如果设置了该属性，音频将自动播放。使用 autoplay 属性进行播放//使用autoplay属性var src = "./award.wav";var body = document.getElementsByTagName("body")[0];if (body.getElementsByT...
复制链接

扫一扫