videoJs实现点击按钮播放切换视频先说⼀下啊!!博主并不会videoJs,只是使⽤其实现视频播放功能;不能解决好友的其他需求,请见谅
链接是videoJs实现视频播放需要的js和css:
下⾯是亲测demo,⼀个简单的demo:
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
7 <title>Insert title here</title>
jquery在线学习视频8 <!-- 播放器样式 -->
9 <link href = "css/video-js.css" rel = "stylesheet" type = "text/css">
10 <!-- 如果要⽀持IE8 -->
11 <script type="text/javascript" src = "js/videojs-ie8.js"></script>
12 <!-- 播放器js -->
13 <script type="text/javascript" src = "js/video.js"></script>
14 <!-- Jquery插件 -->
15 <script type="text/javascript" src = "js/jquery-2.1.4.js"></script>
16 <script>
17 videojs.options.flash.swf = "/js/video-js.swf";
18 </script>
19 <script type="text/javascript">
20
21function Test(obj) {
22var val = $(obj).val();
23//sourceDom = $("<source src=\""+val+"\">");
24 $("#video-box video").prop("src",val);
25//$("#video-box video").append("<source src=\""+val+"\">");
26 $("#video-box").show();
27 $("#video-box video").play()
28
29
30 }
31function test(obj) {
32var url = $(obj).val();
33 videojs.options.flash.swf = "__JS_/js/video-js.swf";
34var myPlayer = videojs("example_video_1");
35 myPlayer.src(url);
36 myPlayer.load(url);
37 }
38 </script>
39 </head>
40 <body>
41
42 <div id = "video-box">
43 <video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264"
44 poster="videoJs/hangge-clip.png"
45 data-setup='{ techOrder: ["flash","html5"]}'>
46 <source src = "" type = "video/mp4" id = "videoURL">
47 </video>
48 </div>
49 <button id = "button" value="hangge.mp4" onclick = "test(this)">第⼀集</button>
50 <button id = "button" value="111.mp4" onclick = "test(this)">第⼆集</button>
51 <button id = "button" value="" onclick = "test(this)">第三集</button>
52 </body>
53 </html>
Test⽅法是⾃⼰实现给src赋值的⽅法;
test是videoJsde ;
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论