html5视频播放

逃离我推掉我的手 2022-03-18 09:24 363阅读 0赞

<!DOCTYPE html>
    <head>
    <meta charset=utf-8> 
    <title>html5播放器</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
    var video = $("#myVideo");
    $('#play').click(function(){video[0].play();});
    $('#pause').click(function(){video[0].pause();});
    $('#go10').click(function(){video[0].currentTime+=5;});
    $('#back10').click(function(){video[0].currentTime-=5;});
    $('#rate1').click(function(){video[0].playbackRate+=2;});
    $('#rate0').click(function(){video[0].playbackRate-=2;});
    $('#volume1').click(function(){video[0].volume+=0.1;});
    $('#volume0').click(function(){video[0].volume-=0.1;});
    $('#muted1').click(function(){video[0].muted=true;});
    $('#muted0').click(function(){video[0].muted=false;});
    $('#full').click(function(){
       video[0].webkitEnterFullscreen();  //webkit类型的浏览器
       video[0].mozRequestFullScreen();   //FireFox浏览器
    });
    
    });
    </script>
    </head>
    
    
    <video id="myVideo" width="600" height="400" controls="controls">
    <source src="SAM_0413.MP4" type="video/mp4"/>
    您的浏览器目前不支持html5
    </video>
    
    <br>
    
    <button id="play" >播放</button>
    <button id="pause" >暂停</button>
    <button id="go10" >前进</button>
    <button id="back10" >后退</button>
    <button id="rate1" >播放速度+</button>
    <button id="rate0" >播放速度-</button>
    <button id="volume1" >音量+</button>
    <button id="volume0" >音量-</button>
    <button id="muted1" >静音</button>
    <button id="muted0" >解除静音</button>
    <button id="full" >全屏</button>
    
    </body>
    
    </body> 
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 html5学习(多媒体，播放视频)

> html5学习(多媒体，播放视频) > > 播放视频主要是使用<video></video>标签，我本篇文章只是抛砖引玉，还有很多<video>标签的api我没列举

浅浅的花香味﹌/ 2022年12月31日 06:21/ 0 赞/ 121 阅读

相关 html5 小视屏,视频网HTML5播放小工具

Failed to load resource: net::ERRBLOCKEDBYCLIENT dyl.js?171030:1 \[Deprecation\] chrome

喜欢ヅ旅行/ 2022年10月09日 14:24/ 0 赞/ 206 阅读

相关 html5视频播放解决方案

html5没学习之前总觉的很神秘。近期通过学习和研究html5有点成果，特总结分享给大家。众所周知应用开发分两种：一是原生的native app 二是web ap

秒速五厘米/ 2022年09月23日 11:59/ 0 赞/ 195 阅读

相关 html5视频播放解决方案

关键词：html5 nativeapp webapp mp4 H.264 html5没学习之前总觉的很神秘。近期通过学习和研究html5有点成果，特总结分享给

桃扇骨/ 2022年07月21日 11:14/ 0 赞/ 238 阅读

相关 html5_视频播放

1. 视频播放 <table> <tbody> <tr> <td style="background:rgb(213,213,213);"><p><stro

悠悠/ 2022年05月25日 05:08/ 0 赞/ 319 阅读

相关 html5视频播放

<!DOCTYPE html> <head> <meta charset=utf-8> <title>html5播放器</title>

逃离我推掉我的手/ 2022年03月18日 09:24/ 0 赞/ 364 阅读

相关 html5自动播放视频

html5可以直接播放视频。就用标记`<video>`即可，真好。可是怎么自动播放视频？不是有"autoplay"吗？但是，无效。任凭你设属性，或是`video.pla

男娘i/ 2022年03月01日 14:14/ 0 赞/ 366 阅读

相关网页嵌入Bilibili HTML5视频播放

Bilibili好在无广告，速度也挺快，无奈B站官方的视频嵌入是Flash的形式，但B站又是支持HTML5播放的，那么问题来了，外站如何嵌入HTML5的播放形式呢？参考了这

深藏阁楼爱情的钟/ 2022年01月12日 01:17/ 0 赞/ 382 阅读

相关 Html5选择本地视频音频文件播放

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

比眉伴天荒/ 2021年11月27日 06:48/ 0 赞/ 663 阅读

相关 HTML视频：视频播放网页

这HTML视频：视频播放网页任务描述相关知识使用HTML5 video元素播放属性嵌入视频网站播放

阳光穿透心脏的1/2处/ 2021年05月16日 20:37/ 0 赞/ 718 阅读