Web Moblie implements video playback

Setting meta Tags

<! <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <! <meta name="format-detection" content="telephone=no" /> <! <meta name=" Apple-mobile-web-app-capable "Content ="yes" /> <! <meta name="apple-mobile-web-app-status-bar-style" content="black">Copy the code

Set font size for body and HTML

• Set by JS

(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if(! clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; }; if(! doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false) })(document, window);Copy the code

• Set using SCSS and LESS

$num is the actual px value

@function rem($num){
  @return unquote(($num/100) + 'rem');
}
Copy the code

After setting, use REM as a unit to fit the phone screen

The use of video. Js

1. Import JS, CSS files, can also be directly downloaded to the local re – import

< link href = "http://vjs.zencdn.net/4.12/video-js.css" rel = "stylesheet" > < script SRC = "http://vjs.zencdn.net/4.12/video.js" > < / script >Copy the code

2. Using the Video Tag

<video id="example_video_1" class="video-js vjs-default-skin" controls
 preload="auto" width="640" height="264" poster="really-cool-video-poster.jpg"
 data-setup='{}'>
  <source src="really-cool-video.mp4" type='video/mp4'>
  <source src="really-cool-video.webm" type='video/webm'>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web browser
    that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  </p>
</video>
Copy the code

You can also change the value with js:

var myPlayer = videojs('example_video_1');
videojs("example_video_1").ready(function(){
  var myPlayer = this;
  // EXAMPLE: Start playing the video.
  myPlayer.play();
});
Copy the code

VideoJs API methods:

1. Access to the object

Var videoObj = videojs (" videoId "); Ready: myPlayer.ready(function(){// In the callback function, this represents the current player, // can call methods, can also bind events. })Copy the code

2. Play:myPlayer.play();
3. Suspended:myPlayer.pause();
4. Get playback progress:var whereYouAt = myPlayer.currentTime();
5. Set the playback progress:myPlayer.currentTime(120);
6. The duration of the video can be known only after the video is loaded, and it is invalid in flash:var howLongIsThis = myPlayer.duration();
7. Buffering, which returns how much was downloaded:var whatHasBeenBuffered = myPlayer.buffered();
8. Percentage buffer:var howMuchIsDownloaded = myPlayer.bufferedPercent();
9. Sound size (0-1) :var howLoudIsIt = myPlayer.volume();
10. Set the sound size:MyPlayer. Volume (0.5);
11. Get the width of video:var howWideIsIt = myPlayer.width();
12. Set width:myPlayer.width(640);
13. Get height:var howTallIsIt = myPlayer.height();
14. Setting height:myPlayer.height(480);
15. One-step setup size:MyPlayer. Size (640480);
16. Full screen:myPlayer.enterFullScreen();
17. Off full screen:myPlayer.enterFullScreen();
18. Add event:

Durationchange ended firstPlay FullScreenChange LoadeDallData LoadedData loadedmetadata loadStart pause // Suspend play // Play progress seeked seeking timeupdate volumechange waiting resize InheritedCopy the code

var myFunc = function(){
// Do something when the event is fired
};
Copy the code

18. event

myPlayer.on("ended", function(){
    console.log("end", this.currentTime());
});
myPlayer.on("pause", function(){
    console.log("pause")
});
Copy the code

19. Delete events

MyPlayer. RemoveEvent (eventName, myFunc);

The pits I encountered:

• Video The video format supported by the video label must be consistent with the specified format. Reference: www.w3school.com.cn/html5/html_… Ogg = Ogg file with Theora video encoding and Vorbis audio encoding MPEG4 = MPEG4 file with H.264 video encoding and AAC audio encoding WebM = WITH VP8 video encoding and Vorbis audio encoding WebM file
• Because I used Hbuiler to test the mobile phone, after setting the built-in server, I failed to access the mobile phone with ios all the time, the video could not be played, I found countless ways, but the result was wrong in the MIME type supported by the server. That is when I switch to XAMPP as a server to access the success!!