求教,为啥音量没变化,innerHTML没作用Uncaught TypeError: Cannot set property 'innerHTML' of un

weixin_44957830 2019-05-09 09:01:43

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="视频.css">
<style type="text/css">
#course{
width: 640px;
background-color: white;
margin: auto;
text-align: left;
box-shadow: 10px 10px 15px black;
}
body{
background-color: silver;
text-align: center;
}
ul{
list-style: none;
padding: 10px;
margin-top: -10px;
}
#yinliang{
text-align: center;
}
#kongzhi{
text-align: center;
}
button{
background: transparent;
border: 0;
outline: 0;
}
</style>
</head>
<body>
<div id="course">
<video id="screen" src="imges/trailer.mp4" width="640">
对不起，您的浏览器不支持视频。
</video>
<div id="yinliang">
<input id="volume" type="range" min="0" max="1" step="0.1" onchange="setVolume()" />
</div>
<div id="kongzhi">
<button id="toggleBtn" onclick="toggleVideo()"><img src="imges/暂停.png" width="50" height="50" /></button>
</div>
<ul>
<li>
<h3>欧洲简史</h3>
</li>
<hr/>
<li onclick="playCourse(10)">
<img src="imges/播放%201.png" width="15" height="15" />
<span>早期基督美术建筑</span>
</li>
<hr/>
<li onclick="playCourse(20)">
<img src="imges/播放%201.png" width="15" height="15" />
<span>早期基督美术之绘画</span>
</li>
<hr/>
<li onclick="playCourse(30)">
<img src="imges/播放%201.png" width="15" height="15" />
<span>早期基督美术之绘画:拜占庭美术</span>
</li>
<hr/>
<li onclick="playCourse(40)">
<img src="imges/播放%201.png" width="15" height="15" />
<span>早期基督美术之绘画：镶嵌画</span>
</li>
<hr/>
<li onclick="playCourse(50)">
<img src="imges/播放%201.png" width="15" height="15" />
<span>早期基督美术之绘画：罗马式美术</span>
</li>
</ul>
</div>
</body>
<script>
var screen = document.getElementById("screen");
var shipin = document.getElementById(video);
var volume = document.getElementById(volume);
var toggleBtn = document.getElementById(toggleBtn);
function playCourse(time) {
screen.currentTime = time;
screen.play();
}
function setVolume() {
shipin.volume = volume.value;
}
function toggleVideo() {
if(screen.paused) {
screen.play();
toggleBtn.innerHTML = '<img src="imges/播放.png" width="50" height="50" />';
}else{
screen.pause();
toggleBtn.innerHTML = '<img src="imges/暂停.png" width="50" height="50" />';
}
}
</script>
</html>

...全文

499 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2019-05-10

打赏
举报

screen.addEventListener("ended", function (e) { toggleBtn.innerHTML = '<img src="imges/暂停.png" width="50" height="50" />'; }, false);

weixin_44957830 2019-05-10

打赏
举报

引用 1 楼天际的海浪的回复：


    var screen = document.getElementById("screen");
    var volume = document.getElementById("volume");
    var toggleBtn = document.getElementById("toggleBtn");
    function playCourse(time) {
        screen.currentTime = time;
        screen.play();
    }
    function setVolume() {
        screen.volume = volume.value;
    }
    function toggleVideo() {
        if(screen.paused) {
            screen.play();
            toggleBtn.innerHTML = '<img src="imges/播放.png" width="50" height="50" />';
        }else{
            screen.pause();
            toggleBtn.innerHTML = '<img src="imges/暂停.png" width="50" height="50" />';
        }
    }

if(screen.ended = true){ toggleBtn.innerHTML = '<img src="imges/暂停.png" width="50" height="50" />'; } 再次请教！

想让视频播放完后自动把按钮变成暂停，我想着加上这段代码但是不管用，应该怎么写

天际的海浪 2019-05-09

打赏
举报


    var screen = document.getElementById("screen");
    var volume = document.getElementById("volume");
    var toggleBtn = document.getElementById("toggleBtn");
    function playCourse(time) {
        screen.currentTime = time;
        screen.play();
    }
    function setVolume() {
        screen.volume = volume.value;
    }
    function toggleVideo() {
        if(screen.paused) {
            screen.play();
            toggleBtn.innerHTML = '<img src="imges/播放.png" width="50" height="50" />';
        }else{
            screen.pause();
            toggleBtn.innerHTML = '<img src="imges/暂停.png" width="50" height="50" />';
        }
    }

易语言源码易语言翻译类源码

易语言源码易语言分类资源管理器源码

内容概要：本文研究了基于共识的捆绑算法（CBBA）在多智能体系统中的多任务分配问题，重点应用于远程太空船交会与维修的相对运动规划（RPO）任务。通过Matlab代码实现了CBBA算法，解决了多个航天器在复杂空间环境下协同执行交会、对接与维修任务时的任务分配挑战。研究突出该算法在分布式决策、冲突避免与资源优化方面的优势，详细探讨了任务打包、竞标机制与共识达成等核心环节，验证了其在无中央控制器条件下实现高效、鲁棒任务分配的有效性。; 适合人群：具备航天动力学、控制理论、多智能体系统及优化算法基础，从事航天器自主任务规划、分布式协同控制等相关领域的研究生、科研人员及工程师。; 使用场景及目标：① 实现多航天器在通信受限与信息不完整的远程空间环境下的自主任务分配；② 提升RPO任务中路径规划与资源调度的效率与安全性；③ 构建去中心化的多智能体协同框架，增强系统整体鲁棒性与可扩展性。; 阅读建议：建议结合提供的Matlab代码深入理解CBBA算法的实现逻辑，重点关注竞标权重设计、任务冲突消解与共识收敛过程，并可通过调整任务规模、通信拓扑与约束条件进行仿真实验，以全面掌握算法性能与适用边界。