JavaScrpit+Html实现“网页播放视频“效果(应用场景:腾讯PC端视频播放器、以及各视频网站页面开发设计)
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端视频播放器、以及各视频网站页面开发设计)相关推荐
- 编码质量评估-编码视频效果测试场景归纳
编码质量评估-编码视频效果测试场景归纳 概述 1 场景 概述 1 场景 1)弱光大白墙场景:主要用于测试拖影 2)弱光和正常光场景切换:主要用于测试拖影 3)正常办公室场景:主要用于测试呼吸效应.锯齿 ...
- 云巡店php源码,云巡店™〡PC端后台管理员设置 讲解视频(下)
原标题:云巡店™〡PC端后台管理员设置 讲解视频(下) ①无纸化云操作,大幅提升巡店效率 ②支持上传视频图片,精准锁定问题 ③工作在线完成,问题整改持续追踪 ④自动生成数据分析,降低人力成本 检查表管 ...
- GoPro fusion(双目) Vr视频如何导出至手机和PC端(Win)
1.软件准备 (1)手机端:GoPro (2)PC端:Gopro fusion studio 2.具体操作 (1)手机端: 下载GoPro app,在gopro中打开设置面板,调出连结,有wifi和密 ...
- 如何在PC端快速下载B站视频,不是唧唧Down,学不会来打我!!!
如何在PC端快速下载B站视频,亲测可用 学不会来打我!!! 哔哩哔哩如今已经从开始小众网站,慢慢进入了越来越多的人的视野和生活中.现在除了看动漫,我们还可以在上面看纪录片.电影.连续剧.科普.以及各种 ...
- php倍速播放,调节视频2倍速的软件 怎样调整视频播放速度,设置视频快放或慢放...
小编周末在用优酷播放器看电视的时候,发现是可以调整视频播放速度的,比如说调整速度为1.2X.1.5X.或者是2.0X.调整视频播放速度的好处就是可以让视频快放或者是慢放,目前小编只发现优酷可以调整,别 ...
- 安卓开发本地视频播放器——扫描本地视频文件显示在gridview上,然后点击播放。
本文将引导大家做一个本地视频播放器,希望能帮到有需要的朋友. 直接上代码: 下面这是获取扫描视频的代码. package com.mediaplayer.utils;import java.util. ...
- 微信PC端测试版更新:新增视频号直播工具
你知道的越多,不知道的就越多,业余的像一棵小草! 你来,我们一起精进!你不来,我和你的竞争对手一起精进! 编辑:业余草 推荐:https://www.xttblog.com/?p=5155 明天就开始 ...
- android 暂停函数,Android万能视频播放器06-添加视频暂停、播放和Seek功能
1.Seek函数: avformat_seek_file(pFormatCtx, -1, INT64_MIN, relsecds, INT64_MAX, 0); relsecds单位: int64_t ...
- html网页全选效果,为什么我用js写的全选/反选/全不选页面,没有效果?
代码奉上 清空 买什么书? PHP HTML5 全选 反选 全不选 function checkall(form,status){ var elements = form.getElementByTa ...
- 批量保存PC端抖音多个视频方法步骤
手机刷抖音觉得累了,来享受一下电脑大屏的快感,下面就向大家分享用媒体梦工厂批量保存视频,一起来看操作. 在网页上搜索抖音进入抖音主页,并进入挑选作品 进入某个作者的播放页上,复制视频的链接 接着打开媒 ...
最新文章
- android 4G产品4G网络问题记录
- shell脚本操作mysql数据库,使用mysql的-e参数可以执行各种sql的(创建,删除,增,删,改、查)等各种操作
- HBase-TDG Architecture
- linux进程管理简析
- 学考语言成绩c对高考有影响吗_广东2020学考招录办法来了,实现平行志愿,计划不低于年度总计划50%...
- 澳门智能公交调度系统客户端GUI设计
- 计算机除数的时候怎么会有分数,在做除法运算时,为什么0不能做除数?
- 第十二章(项目采购管理)知识点
- uplift模型实战代码
- html5闪光效果,HTML5 canvas元素背景梦幻小星星闪烁特效
- html中如何写平方根等,开方符号 数学符号平方根号等怎么输入
- 让女朋友说Yes I Do的方法,数据分析助力客户管理的秘籍
- snubber电路总结
- 阿里 java 开发手册
- bookkeeper安装及测试体验
- latex插入参考文献小技巧
- 有趣且重要的JS知识合集(18)浏览器实现前端录音功能
- 联想F31,老机换新颜--Win8.1安装手记
- 嵌入式系统定义组成调度等
- XPS表征(工作原理与特点)