admin 管理员组文章数量: 887019
JavaScrpit+Html实现"网页播放视频"效果(应用场景:腾讯PC端视频播放器、以及各视频网站页面开发设计)
文章目录
- JavaScrpit+Html实现"网页播放视频"效果(应用场景:腾讯PC端视频播放器、以及各视频网站页面开发设计)
- 前言
- 一、什么是JavaScrpit？
- 二、什么是Css？
- 三、什么是Html？
- 四、JavaScrpit前端代码实现
- 1.创建一个文件夹放入资源文件
- 2.创建一个文本然后打开
- 2.效果实现
- 总结
前言
让你体验一下，一个PC在线播放视频的实现过程，你就会对腾讯、爱奇艺、优酷等PC端视频播放就会有一个对它的理解，和他的开发设计构造等知识，话不多说，上代码！
准备：就拿我旅行的视频做元素吧。
一、什么是JavaScrpit？
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。(百度百科)。
二、什么是Css？
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 (百度百科)。
三、什么是Html？
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 。(百度百科)。
四、JavaScrpit前端代码实现
1.创建一个文件夹放入资源文件
说明：一共三个文件，jQuery.js组件支持文件、一个创建的网页、一个视频(MP4)格式。
如果你想在项目中引入此功能：以上三个文件都不能少，放在web资源目录即可
2.创建一个文本然后打开
创建.txt文本，然后写上代码保存，然后将文本后缀改为.html保存，使用浏览器打开即可，注意src，视频地址改成你的视频存放路径。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 页面播放视频教程 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<h1 style="color: indigo" align="center">我的旅行日记，喜欢就点一个关注吧。。。。。 </h1>
<video src="C:\Users\AA\Desktop\aaa\我的旅行日记.MP4" controls="controls" width="100%" height="80%"></video>
</BODY>
</HTML>
1、 标签 <script></script>体里面要写js的代码,逻辑处理的代码。
2、 标签 <style></style>体里面要写css的代码，页面展示的样式。
3、 标签 <BODY></BODY>体里面主要是展示页面的内容。
4、 标签 <HEAD></HEAD>体里面主要是标题头格式区。
5、 标签 <HTML></HTML>体是整个页面的区域。
6、 标签 <TITLE>省市联动</TITLE>体是整个页面的标题名称。
2.效果实现
总结
就不放视频效果啦，图片也是可以的，按照以上操作。
就能实现页面播放视频的效果。加油yyds!!
版权声明：本文标题：JavaScrpit+Html实现“网页播放视频“效果(应用场景:腾讯PC端视频播放器、以及各视频网站页面开发设计) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1726780280h1027643.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论