JS——视频播放(1)

待我称王封你为后i 2022-06-03 01:44 225阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" href="css/video.css">
    </head>
    <body>
    	<div class="container">
    		
    		<video src="video/birds.mp4" id="v3">
    			您的浏览器不支持video标签！
    		</video>
    		
    		<a href="#" class="crtl">
    			<img src="video/pause.png" alt="">
    		</a>
    	</div>
    	
    	<script>
    		var container=document.querySelector(".container");
    		var crtl=document.querySelector(".crtl");
    		crtl.style.display="none";
    		container.οnmοuseοver=function(){
    			console.log("onmouseover");
    			crtl.style.display="block";
    		}
    		container.οnmοuseοut=function(){
    			console.log("onmouseout");
    			crtl.style.display="none";
    		}
    
    		var v3=document.getElementById("v3");
    		var img3=document.querySelector(".crtl img");
    		crtl.οnclick=function(e){
    			e.preventDefault();
    			if(v3.paused){
    				v3.play();
    				img3.src="video/play.png";
    			}else{
    				v3.pause();
    				img3.src="video/pause.png";
    			}
    		}
    		v3.οnpause=function(){
    			img3.src="video/pause.png";
    		}
    		//结束了以后应该切换成停止按钮图片
    	</script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，225人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 使用flv.js播放rtsp视频

vue 使用 flv.js 播放 rtsp 视频，你可以这样做： 1. 安装 flv.js： npminstall flv.js 1. 在 vue 项目中引入

小咪咪/ 2024年03月27日 18:12/ 0 赞/ 85 阅读

相关 2015.07.18［播放音频、视频_1］

// // ViewController.swift // media // // Created by cyan on 15/7/18. // Copyri

灰太狼/ 2022年08月02日 11:43/ 0 赞/ 192 阅读

相关 JSP播放视频

以下代码直接放在<body></body>中在网站中插入media视频的代码- - <OBJECT id=WMP height=320 standby=Loadi

忘是亡心i/ 2022年06月16日 10:42/ 0 赞/ 315 阅读

相关 iOS 视频播放

1 AVPlayer (1) 优缺点优点:可以自定义 UI, 进行控制缺点:单纯的播放,没有控制 UI(进度,暂停,播放等按钮),而且如果要显示

灰太狼/ 2022年06月14日 02:27/ 0 赞/ 388 阅读

相关 JS——视频播放(1)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

待我称王封你为后i/ 2022年06月03日 01:44/ 0 赞/ 226 阅读

相关视频播放插件Video.js

来源：http://www.jq22.com/jquery-info404 Video.js最新v6.6.2版 2018-1-02更新 Bug 修复进度条时间工具

妖狐艹你老母/ 2022年05月28日 01:13/ 0 赞/ 455 阅读

相关 video.js 结合 flv.js播放flv视频

<!DOCTYPE html> <html lang="en"> <head> <title>video</title>

秒速五厘米/ 2022年04月14日 03:09/ 0 赞/ 604 阅读

相关 video.js实现视频自动循环播放

<%@ page language="java" import="java.util." pageEncoding="utf-8"%> <% Strin

╰+哭是因爲堅強的太久メ/ 2022年01月28日 06:55/ 0 赞/ 707 阅读

相关视频播放组件

import React, \{Component\} from 'react'; import \{View, Dimensions, Image, Text, Slid

Bertha 。/ 2021年09月19日 13:48/ 0 赞/ 600 阅读

相关 js多个视频顺序循环播放

window.onload=function(){ var str = '${vedioStr}'; //所要播放视频的路径组 var

曾经终败给现在/ 2021年07月24日 20:51/ 0 赞/ 629 阅读