求教,为啥音量没变化,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>

...全文

498 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" />';
        }
    }

# 动手学深度学习第二版 pytorch 版本 # https://zh-v2.d2l.ai/

打开链接下载源码： https://pan.quark.cn/s/64cfd9352cf7 VLC播放器是一款备受青睐的跨平台开源多媒体播放软件，其3.0.11版本在继承既有卓越功能的同时，显著优化了对特定音视频编码格式的兼容性，尤其着重于对AVS+和DRA这两种源自中国的编码标准的支持。这一改进使得VLC不仅能够处理国际上通行的H264和H265视频编码，以及AC3音频编码，更能契合国内用户的播放需求，流畅播放采用AVS+和DRA编码的多媒体资料。1. **AVS+（Advanced Video Coding Plus）**：AVS+是中国自主设计的一种高效视频编码规范，其核心目标在于提升编码效能，减少带宽占用，特别适用于高清及超高清视频的传输。相较于早期的AVS技术，AVS+在编码效能、图像质量和实现难度上取得了更优的均衡，为国内的电视广播、IPTV、网络视频等领域提供了定制化的解决方案。2. **DRA（Digital Radio Audio）**：DRA是一种基于数字音频广播的高保真音频编码技术，由中国独立研发而成。该技术支持多样化的码率和声道布局，确保提供卓越的音频体验，同时具备优异的网络适应性及低延迟表现，适用于广播、互联网音频传输等多种使用场景。3. **H264（亦称AVC）**：H264是一种高效视频压缩规范，广泛应用于在线视频、流媒体服务、蓝光光盘等领域，其显著优势在于能够在较低的码率下呈现高清晰度的视频画面。4. **H265（亦称HEVC）**：作为H264的升级版标准，H265在压缩效率上实现了进一步突破，相同画质下可将文件大小减半，这对4K、8K等超高清视频的传输和存储尤为关键。5. **AC3（Dolby Digital）**：AC3是...

卧式柱塞泵泵体夹具设计【说明书+CAD图纸+外文翻译+过程卡】.rar

本资源为 Three Quarks 开源项目完整源码压缩包，该项目是面向科学计算、物理仿真的 Python 高性能运算框架，依托底层优化实现矩阵运算、微分求解、粒子仿真等功能。 1. 适用人群：计算物理研发人员、数据分析工程师、理工科科研学生、数值仿真项目开发者； 2. 适用场景：物理场数值模拟、金融数值建模、工科仿真算法落地、深度学习底层算子测试； 3. 配套内容：源码自带多组仿真示例、环境部署说明、依赖配置文档，规避 GitHub 下载限速，本地配置依赖即可编译调试。

人工智能大作业.doc