<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="expires" content="0">

<title>video播放视频以及相关事件</title>

<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" />

<style type="text/css">

.playVideo{

    margin: 100px;

}

</style>

</head>

<body>

<div class="playVideo">

    <video class="news_video" src="fayuan.mp4" controls=""></video>

</div>

<script type="text/javascript" src="jquery/jquery.min.js"></script>

<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>

<script type="text/javascript">

$(function(){  

    playVideo();  

    /*视频播放状态*/

    $('.news_video').bind('play', function () {

        alert("正在播放视频");

    });  

    /*视频结束或错误*/

    $('.news_video').bind('error ended', function(){

        alert("播放视频结束");

    })  

    /*视频暂停*/

    $('.news_video').bind('pause', function () {

        alert("暂停");

    });  

　　video.controls=true;//显示进度条
}) //播放视频  function playVideo(){ var video = $(".news_video"); if(video.length>0){ video[0].play(); } } </script> </body> </html>

video播放视频以及相关事件的更多相关文章

  1. HTML5 - 使用<video>播放视频

    ,下面是一个播放视频的最简单样例 (controls属性告诉浏览器要有基本播放控件) <video src="hangge.mp4" controls></vid ...

  2. 微信浏览器video播放视频踩坑

    video属性介绍 iOS的属性 playsinline On iPhone, video playsinline elements will now be allowed to play inlin ...

  3. HTML5 video 播放视频黑屏

    <video width="320" height="240" controls>        <source src="movi ...

  4. H5 video播放视频遇到的问题

    我在别的网站上下载了一个mp4格式的视频,加到video标签里可以正常播放, 然后我用FLV自己转成mp4,却提示不支持的格式和mine类型, 后来找到一篇文章 http://jingyan.baid ...

  5. 如何使用微信小程序video组件播放视频

    相信很多人都有在手机上看视频的习惯,比较看视频更真实更形象.那么我们在微信小程序中如何观看视频呢?这就需要video组件的帮忙了.今天我们就给大家演示一下,如何用微信小程序组件video播放视频.我们 ...

  6. 关于大视频video播放的问题以及解决方案（m3u8的播放）

    在HTML5里,提供了<video>标签,可以直接播放视频,video的使用很简单: <video width="320" height="240&qu ...

  7. 手机浏览器自动播放视频video（设置autoplay无效）的解决方案

    1.问题的提出 某一天接了个需求,需要在手机的H5页面内加入视频,我开开心心做完,准备交付的时候,问题来了,PM想要用户一进入页面,视频就开始播放,不需要用户手动点击. 2.尝试解决 加autopla ...

  8. video元素和audio元素相关事件

    前言 在利用video元素或audio元素读取或播放媒体数据时,会触发一系列事件,如果用js脚本来捕抓这些事件,就可以对着这些事件进行处理了. 捕抓的方式有两种: 第一种是监听的方式.使用vedio或 ...

  9. 解决html5 video不能播放 能播放声音不能播放视频

    <video id="playVideo" style="width:90%; height:auto;" controls poster=". ...

随机推荐

  1. 设计模式之抽象工厂模式(Abstract Factory Pattern)

    一.抽象工厂模式的由来 抽象工厂模式,最开始是为了解决操作系统按钮和窗体风格,而产生的一种设计模式.例如:在windows系统中,我们要用windows设定的按钮和窗体,当我们切换Linux系统时,要 ...

  2. linux下redis安装运行教程——redis系列

    天没降大任于我,照样苦我心智,劳我筋骨. 安装运行的过程 由于官网太慢,csdn里的资源又要钱,所以呢,只能使用我自己本地以前下载的陈年..哦不,3.xredis安装包 资源已经放到百度云,需要的可以 ...

  3. 「NOIP模拟赛」Round 3

    Tag 计数+LIS, 二分+ST表, 计数+记搜 A. 改造二叉树 Description 题面 Solution 如果目标序列非严格递增,或者说目标序列是不下降的,那么答案就是 \(n\) 减去最 ...

  4. Windows包管理器——Scoop 包管理器

    Scoop 包管理器 目录 Scoop 包管理器 参考 官方 博客 声明 目录 scoop 安装&&卸载 安装( 使用 powershell) 卸载(软件的使用权归自己所有,一言不合即 ...

  5. IDEA如何像ecplise一样添加jar包？

    以前使用ecplise开发代码,现在换成IDEA,有很多操作都不习惯,比如添加jar包.网上可以找到IDEA好几种添加jar包的方法,这里主要介绍在用IDEA开发时如何像ecplise一样添加jar包 ...

  6. Balanced Diet Gym - 102220B

    题目链接:https://vjudge.net/problem/Gym-102220B 题意:每组数据 给了 N和M表示有M种类型的糖果,这些糖果一共N个.接下了是 M 组数据,表示如果你选第 i 中 ...

  7. vue中常见的问题以及解决方法

    有一些问题不限于 Vue,还适应于其他类型的 SPA 项目. 1. 页面权限控制和登陆验证 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访 ...

  8. Macbook 安装kali linux 双系统 2020.3 超详细

    博主折腾了一星期这东西,到现在都还有些坑没解决(最后面会讲).不过最起码系统装上了,可以用了,看到这桌面惊艳了,再点下左上角表示人间值得. 其实我是装了windos 10.macos 和kali三系统 ...

  9. 【图像处理】OpenCV+Python图像处理入门教程（六）图像平滑处理

    相信很多小伙伴都听过"滤波器"这个词,在通信领域,滤波器能够去除噪声信号等频率成分,然而在我们OpenCV中,"滤波"并不是对频率进行筛选去除,而是实现了图像的 ...

  10. 配置IIS虚拟站点(5)

    开发完ASP.NET网站后,想要直接浏览,不通过开发环境,那么就需要配置IIS虚拟站点 1.开始菜单->控制面板->所有控制面板->管理工具->双击打开Internet信息服务 ...